安裝
//如果你使用的是vue-cli旺上，那么你可以跳過了
npm install vue-router
使用
//ok瓶蚂，接下來你需要一個router.js文件，內(nèi)容模板是這樣的宣吱，請不要忘記這一步窃这，（此后都是在工程化前提實施）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
export default new Router({
routes: [
{
name: 'xxx',
path: '/xxx',
component: Home
}
]
})
//然后你得去到 main.js 內(nèi)，將這個路由注入征候，這里我就直接抄官方的模板了
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
現(xiàn)在你的路由跟上面一樣了杭攻，然后，你需要在 app.vue 內(nèi)這樣寫
//因為我們?yōu)閤xx路徑綁定的是 hello 組件疤坝，所以你可以自己去 hello 組件內(nèi)寫一些東西兆解，方便驗證
<router-link to="/xxx">點我去xxx</router-link>
動態(tài)傳參
有時候我們回到這樣的場景，網(wǎng)頁中有幾個選項卡跑揉，每個選項卡都有對應的id锅睛，每個選項卡點進去可以看到詳細信息，這個時候历谍，我們可以這樣寫
<router-link :to="{name: '選項卡頁面', params:{id: 選項卡id}}">選項卡1</router-link>
//在 data 中就要定義對應的id
data(){
return {
選項卡id: 421
}
}
//router.js 內(nèi)是這樣寫
{
name: '選項卡頁面',
path: 'page/:id',
component: 選項卡頁面 //需要import進來
}
//然后當我們點擊這個標簽時现拒，url 后綴會變成這樣 /page/421
//那么如何獲取到這個id參數(shù)呢？
//這樣
this.$route.params.id
//當然扮饶，如果你是在文本插值中使用具练，那么就不需要加this了
編程式導航
使用編程式導航就相當于使用<router-link to="xxx"></router-link>
//首先，你要將router對象導出甜无，然后創(chuàng)建 helper.js 扛点，導入 router
//router.js
consn router = new Router({
routes:[
//路由信息
]
})
export default touter
// helper.js
import router from './router'
export function xxx(){
router.push(這里可以寫路徑，也可以使用對象寫法)
}
//然后在你需要使用的地方導入helper中對應的函數(shù)岂丘，監(jiān)聽click陵究，方法就是你導入的這個函數(shù)
注意：如果提供了 path，params 會被忽略
嵌套路由
- 場景：
- 在 /user/:id 下奥帘，我們還需要在進入一個路由看到其他信息铜邮，這個路由得定義在 /user/:id 下，此時就可以使用嵌套路由
const router = new Router({
routes: [
// 動態(tài)路徑參數(shù) 以冒號開頭
{
name:'user',
path: '/user/:id',
component: user,
children:[
{
/*它匹配的路徑是 /user/:id/foo*/
/*將對應的router-view寫到user里面*/
name: 'user_foo',
path: 'foo',
component: foo
}
]
}
]
})
//定義在user里面
<router-link
:to="{
name: 'user_foo',
params: this.$route.params.id
}"
>
foo
</router-link>
