1.安裝
使用npm在工程中安裝vue-router
npm install vue-router --save
2.配置
在src目錄下新建router目錄，在目錄中新建index.js
其中聲明路由配置
import Vue from 'vue'
import Router from 'vue-router'
import house_list from '@/components/house_list.vue'
import house_detail from '@/components/house_detail.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'house_list',
component: house_list
},
{
path: '/detail',
name: 'house_detail',
component: house_detail
}
]
})
3.使用
在main.js中加載vue-router
import router from './router/index.js'
在vue實例中使用router
new Vue({
render: h => h(first),
router
}).$mount('#app')
使用<router-view></router-view>表示此處使用路由指定的頁面
<template>
<div id="first">
<navi></navi>
<router-view></router-view>
</div>
</template>
<navi>是一個導(dǎo)航組件，其中定義了導(dǎo)航菜單
<template>
<div class="banner">
<div class="logo">Anjoke</div>
<div class="navigator">
<ul>
<li>
<router-link to="/">首頁</router-link>
</li>
<li>
<router-link to="/detail">詳細(xì)</router-link>
</li>
</ul>
</div>
</div>
</template>
其中<router-link to="/">會被解析為一個超鏈接，表示vue-router指向的路徑
4.路由傳參
現(xiàn)有如下場景，點擊父組件的li元素跳轉(zhuǎn)到子組件中，并攜帶參數(shù)，便于子組件獲取數(shù)據(jù)。
<router-link :to="{name:'aaa',params:{id:hid}}">跳轉(zhuǎn)</router-link>
4.1 方案一
在index.js的router配置中,要在path中添加/:hid來對應(yīng) $router.push 中path攜帶的參數(shù)。在子組件中可以使用來獲取傳遞的參數(shù)值。此方式類似于restful風(fēng)格的url，個人推薦使用
{
path: '/describe/:hid',
name: 'demo',
component: xxxx組件
}
- 普通超鏈接或者按鈕
<button @click="getDescribe(hid)">
function getDescribe(id) {
this.$router.push({
path: `/describe/${hid}`,
})
｝
- router-link
<router-link :to="{name:'demo',params:{hid:hid}}">跳轉(zhuǎn)</router-link>
子組件中通過以下代碼獲取
this.$route.params.hid
4.2 方案二
父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。對應(yīng)路由配置: 這里可以添加:/id 也可以不添加，不添加數(shù)據(jù)會在url后面顯示，不添加數(shù)據(jù)就不會顯示。如果不添加：id數(shù)據(jù)會在刷新的時候消失。此方式類似post方式，可以不在url上顯示傳輸數(shù)據(jù)，但頁面刷新可能造成數(shù)據(jù)丟失
index.js中關(guān)于router的配置
{
path: '/describe',
name: 'demo',
component: xxxx組件
}
超鏈接或普通按鈕
function getDescribe(id) {
this.$router.push({
name: 'demo',
params: {
hid: hid
}
})
｝
子組件中通過以下代碼獲取
this.$route.params.hid
4.3 方案三
用path來匹配路由，然后通過query來傳遞參數(shù)這種情況下 query傳遞的參數(shù)會顯示在url后面?id=？
index.js中關(guān)于router的配置。此方式類似get方式的url傳值形式
{
path: '/describe',
name: 'demo',
component: xxxx組件
}
超鏈接或普通按鈕
function getDescribe(id) {
this.$router.push({
name: 'demo',
query: {
id: id
}
})
｝
子組件中通過以下代碼獲取
this.$route.query.id
5.路由守衛(wèi)
5.1 全局守衛(wèi)
所謂全局路由守衛(wèi)，就是小區(qū)大門，整個小區(qū)就這一個大門，你想要進(jìn)入其中任何一個房子，都需要經(jīng)過這個大門的檢查。
全局路由守衛(wèi)有個兩個，一般定義在main.js中：
- 全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪個頁面去
console.log(from) => // 從哪個頁面來
next() => // 一個回調(diào)函數(shù)
}
- 全局后置守衛(wèi)
router.afterEach（to，from） = {}
next()：回調(diào)函數(shù)參數(shù)配置
- next()： 繼續(xù)當(dāng)前的導(dǎo)航
- next(false): 中斷當(dāng)前的導(dǎo)航。
如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址 - next('/') : 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。
- next({ path: '/' }): 當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。
可以向 next 傳遞任意位置對象，且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項
5.2 組件路由守衛(wèi)
跟methods: {}等同級別書寫，組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
- 在路由進(jìn)入之前，組件實例還未渲染，所以無法獲取this實例，只能通過vm來訪問組件實例
beforeRouteEnter (to, from, next) {
next(vm => {})
}
- 同一頁面，刷新不同數(shù)據(jù)時調(diào)用，
beforeRouteUpdate (to, from, next)
}
- 離開當(dāng)前路由頁面時調(diào)用
beforeRouteLeave (to, from, next) {
}
5.3 獨享守衛(wèi)
路由獨享守衛(wèi)是在路由配置頁面單獨給路由配置的一個守衛(wèi)
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
