基本使用：
之前的切換頁面的做法存在的問題是：沒有匹配相應的路由。
1.下載：（1）通過腳手架事先配置好，（2）自己下載
npm install vue-router --save
2.使用
在main.js中使用router插件
import vueRouter from "vue-router"
import Home from "/Home"
import User from "/User"
Vue.use(vueRouter)
const router=new vueRouter({
routers:[
{path:"/",component:Home},
{path:"/user",component:User},
]
})
new Vue({
el：'#app'，
router：router //使用當前的router,ES6中可以簡寫成router
render:h=>h(App)
})
3.要在哪個地方切換頁面組件，如：中間的內容區域
<router-view></router-view>
4.爲了router容易維護，所以要單獨建立router.js文件
import Vue from "vue"
import vueRouter from "vue-router"
import Home from "/Home"
import User from "/User"
Vue.use(vueRouter)
export default new vueRouter({//暴露出去
routers:[
{path:"/",component:Home},
{path:"/user",component:User},
]
})
然後在main.js文件中引入這個文件
import router from "./router"
new Vue({
el：'#app'，
router：router //使用當前的router,ES6中可以簡寫成router
render:h=>h(App)
})
5.路由的hash和history
hash：不會向後臺發送數據，不需要跟後端溝通
history：會向後臺發送數據請求
6.跳轉頁面
6.1.通過標籤跳轉頁面，
1.router-link標籤默認爲a標籤
2.默認樣式爲router-link-active，想自己設置切換樣式可以用active-class，exact爲精準匹配
<template>
<div>
<ul>
<router-link tag="li" active-class="active" to="/" exact>首頁</router-link>
</ul>
</div>
</template>
<style scoped>
.active {
border-bottom: 2px solid red;
}
</style>
6.2.通過js跳轉頁面
<template>
<div>
<button @click="goToHome">跳轉到主頁</button>
</div>
</template>
<script>
export default{
methods:{
goToHome(){
this.$router.push("/");//簡單使用
this.$router.push({path:"/"});
}
}
}
</script>
動態路由：
1.在router.js中定義User組件爲動態路由，傳id
import Vue from "vue"
import vueRouter from "vue-router"
import Home from "/Home"
import User from "/User"
Vue.use(vueRouter)
export default new vueRouter({//暴露出去
routers:[
{path:"/",component:Home},
{path:"/user/:id",component:User},//傳一個字段
{path:"/user/:id/:name",component:User},//傳兩個字段
]
})
2.在User組件中怎麼獲取這個id呢？
<template>
<div>
<p>{{id}}</p>
<button @click="goToHome">跳轉到主頁</button>
</div>
</template>
<script>
export default{
data(){
return{
id:this.$route.params.id //獲取傳過來的id
}
},
created(){
console.log(this.$route);
},
methods:{
goToHome(){
this.$router.push("/");//簡單使用
this.$router.push({path:"/"});
}
}
}
</script>
存在問題，從User1切換到User2的時候，id並沒有從1變成2，因爲id只有在創建組件的時候纔會創建
雖然User1和User2是同一個組件，組件沒有發生變化，但是路由發生了變化，所以我們可以監聽路由
<template>
<div>
<p>{{id}}</p>
<button @click="goToHome">跳轉到主頁</button>
</div>
</template>
<script>
export default{
data(){
return{
id:this.$route.params.id //獲取傳過來的id
}
},
watch:{
$route(to,from){
console.log(to);
console.log(from);
this.id=to.params.id; //使用傳過來的id可以進行切換
}
},
created(){
console.log(this.$route);
},
methods:{
goToHome(){
this.$router.push("/");//簡單使用
this.$router.push({path:"/"});
}
}
}
</script>
嵌套路由：
1.在router.js中編寫嵌套路由
import Vue from "vue"
import vueRouter from "vue-router"
import Home from "/Home"
import User from "/User"
import UserStart from "/UserStart"
import UserDetail from "/UserDetail"
import UserEdit from "/UserEdit"
Vue.use(vueRouter)
export default new vueRouter({//暴露出去
routers:[
{path:"/",component:Home},
{
path:"/user",
component:User,
children:[
{
path:"", //不能寫成 path:"/"
component:UserStart
},
{
path:":id",
component:UserDetail
},
{
path:":id/edit",
component:UserEdit
}
]
},
]
})
2.在User組件中去切換它的子路由
<template>
<div>
<button @click="goToHome">跳轉到主頁</button>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default{
methods:{
goToHome(){
this.$router.push("/");//簡單使用
this.$router.push({path:"/"});
}
}
}
</script>
我們使用了兩個<router-view></router-view>標籤，一個大的路由切換用在App.vue，另一個子路由切換用在User.vue，因爲這些子路由是基於User這個組件
子路由UserDetail組件根據id的不同切換不同的內容：
<template>
<div>
<ul>
<router-link tag="li" active-class="active" to="/user/1" exact>User1</router-link>
<router-link tag="li" active-class="active" to="/user/2" exact>User2</router-link>
</ul>
</div>
</template>
在User組件的子路由UserDetail組件去編寫：
<template>
<div>
<h3>用戶詳情</h3>
<p>{{ $route.params.id }}</p>
<router-link :to="'/user/'+$route.params.id+'/edit'" tag="button">編輯</router-link>
</div>
</template>
上面這樣寫有些麻煩
我們在router.js中修改了一下
{
path:":id/edit",
component:UserEdit,
name:"userEdit" //命名
}
這樣寫，看起來比較直觀
<template>
<div>
<h3>用戶詳情</h3>
<p>{{ $route.params.id }}</p>
<router-link :to="{name:'userEdit',params:{id:$route.params.id}}" tag="button">編輯</router-link>
</div>
</template>