文章目錄

• • 一、路由概述
  • 二、基本使用
  • • 1. 安裝vue-router
    • 2. 應用插件
    • 3.編寫router配置項
    • 4. 實現切換
    • 5. 指定組件的呈現位置
    • 多級路由（嵌套路由）
    • 1.配置路由規則，使用children配置項
    • 2.跳轉（寫完整路徑）
  • 三、路由的query參數
  • • 1.傳遞參數
    • 2.接收參數
  • 四、命名路由
  • • 1.命名
    • 2.簡化跳轉
  • 五、路由的params參數
  • • 1.配置路由，聲明接收`params`參數
    • 2.傳遞參數
    • 3.接收參數
  • 六、路由的props配置
  • 七、 `` 的`replace`模式
  • 八、編程式路由導航
  • 九、緩存路由組件
  • 十、兩個新的生命周期鉤子
  • 十一、路由守衛
  • • 1.全局路由守衛
    • 2.獨享路由守衛
    • 3.組件內路由守衛
  • 十二、路由器的兩種工作模式

一、路由概述

一個路由就是一組key:value的對應關系（key為路徑，value可能是function或component）

前端路由：（value是component）用于展示頁面內容，當瀏覽器的路徑改變時，對應的組件就會顯示。

多個路由需要經過路由器的管理

router包含多個route規則（/class => 班級組件 、/subject => 學科組件）

vue-router 專門用來實現SPA應用

注： SPA頁面（單頁面應用）（只有一個完整的頁面）

（點擊頁面中導航鏈接不會刷新頁面，只會做頁面的局部更新）

二、基本使用

router-link最終轉換為a標簽

1. 安裝vue-router

npm i vue-router

2. 應用插件

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3.編寫router配置項

創建文件 `src/router/index.js` //該文件專門用于創建整個應用的路由器 //引入VueRouter import VueRouter from "vue-router"//引入路由組件 import About from '../pages/About' import Home from '../pages/Home'//創建router實例對象，管理一組一組的路由規則 const router = new VueRouter({routes:[{path:'/about',components:About},{path:'/home',component:Home}] }) //暴露router export default router

4. 實現切換

<router-link active-class="active" :to="/about">About</router-link>

注：router-link最終轉換為a標簽，:to類似于href，active-class可配置高亮樣式

5. 指定組件的呈現位置

<router-view></router-view>

注：

• 路由組件專門放入新建pages文件夾中，一般組件通常存放在components文件夾中。

• 通過切換，隱藏了的路由組件，默認是被銷毀掉的，需要的時候再去掛載。

• 每個組件都有自己的$route屬性，里面存儲著自己的路由信息

• 整個應用只有一個router，可以通過組件的$router屬性獲取到

多級路由（嵌套路由）

1.配置路由規則，使用children配置項

export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[ //配置子級路由{path:'news', //不用再加/component:News,},{path:'message', //不用再加/component:Message}]}] })

2.跳轉（寫完整路徑）

<router-link :to="/home/news">About</router-link>

三、路由的query參數

1.傳遞參數

（Message.vue內）

<!-- 跳轉路由并攜帶query參數 to的字符串寫法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> <!-- 跳轉路由并攜帶query參數 to的對象寫法 --> <router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}"> {{m.title}}</router-link>

2.接收參數

（Detail.vue內）

{{$route.query.id}} {{$route.query.title}}

四、命名路由

（簡化路由的跳轉）

1.命名

export default new VueRouter({routes:[{name:'xiaoxi',path:'/message',component:Message,children:[{name:'xiangqing'path:'detail', //不用再加/component:Detail,},]}, })

2.簡化跳轉

<!-- 簡化前寫完整路徑 --> <router-link to="/message/detail">跳轉</router-link> <!-- 簡化后通過名字跳轉 --> <router-link :to="{name:'xiangqing'}">跳轉</router-link> <!-- 簡化寫法配合傳遞參數 --> <router-link :to="{name:'xiangqing',query:{id:m.id,title:m.title}}"> 跳轉</router-link>

五、路由的params參數

1.配置路由，聲明接收params參數

{path:'/home',component:Home,children:[ //配置子級路由{path:'news', //不用再加/component:News,},{path:'message', //不用再加/component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符聲明接收params參數component:Detail}]}] }

2.傳遞參數

（Message.vue內）

<!-- 跳轉路由并攜帶params參數 to的字符串寫法 --> <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link><!-- 跳轉路由并攜帶query參數 to的對象寫法 --> <!-- 必須寫name 不能用path寫 --> <router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}} </router-link>

注：攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置

3.接收參數

（Detail.vue內）

$route.params.id $route.params.title

六、路由的props配置

讓路由組件更方便的收到參數

{name:'xiangqing',path:'detail',component:Detail,// props的第一種寫法，值為對象，該對象中的所有key-value都會以props的形式傳給detail組件// props:{a:1,b:'hello'} 寫死了// props的第二種寫法，值為布爾值，若布爾值為真，就會把該路由組件收到的所有params參數，以props的形式傳給Detail組件// props:true// props的第三種寫法，值為函數，該函數返回對象中的每一組key-value都會通過props傳給Detail組件props($route){return {id:$route.query.id,title:$route.query.title}}//連續解構賦值/* props({query:{id,title}}){return {id,title}} */ }

Detail.vue內接收

props:['id','title']

七、 <router-link> 的replace模式

（控制路由跳轉時操作瀏覽器歷史記錄的模式）

瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace，push是追加歷史記錄，replace是替換當前記錄，默認為push

<router-link replace ...>News</router-link>

八、編程式路由導航

（不借助<router-link>實現路由跳轉）

Message.vue內兩個按鈕的點擊事件的具體內容

this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx} }) this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx} })

this.$router.back() //后退 this.$router.forward() //前進 this.$router.go(-2) //正數連續前進n步，負數連續后退n步

九、緩存路由組件

讓不展示的路由組件保持掛載，不被銷毀

<!-- News指組件名 --> <keep-alive include="News"><router-view></router-view> </keep-alive><!-- 緩存多個路由組件 --> <keep-alive :include="['News','Message']"><router-view></router-view> </keep-alive>

十、兩個新的生命周期鉤子

路由組件獨有的，用于捕獲路由組件的激活狀態

activated：路由組件被激活時觸發

deactivated：路由組件失活時觸發

十一、路由守衛

保護路由的安全（權限）

1.全局路由守衛

index.js內

//全局前置路由守衛————初始化被調用，每次路由切換之前被調用 router.beforeEach((to,from,next)=>{console.log('前置路由守衛',to,from);if(to.meta.isAuth){ //判斷是否需要鑒權// if(to.path === '/home/news' || to.path === '/home/message'){if(localStorage.getItem('school')==='xiaoxue'){next()}else{alert('學校名不對，無權限查看')}}else{next() //放行} })//全局后置路由守衛————初始化被調用，每次路由切換之后被調用 router.afterEach((to,from)=>{console.log('后置路由守衛',to,from);document.title = to.meta.title || '系統' }) export default router

注：meta：路由元信息，在路由組件內添加，設置isAuth值為true的組件需要鑒權

? next()：放行

2.獨享路由守衛

某一個路由所獨享的，在其路由配置內編寫。（只有前置沒有后置）

beforeEnter: (to, from, next) => {console.log('前置路由守衛',to,from);if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制// if(to.path === '/home/news' || to.path === '/home/message'){if(localStorage.getItem('school')==='xiaoxue'){next()}else{alert('學校名不對，無權限查看')}}else{next()} }

3.組件內路由守衛

在組件內編寫。

//通過路由規則，進入該組件時被調用 beforeRouteEnter(to, from, next) {console.log("beforeRouteEnter", to, from);if (to.meta.isAuth) {//判斷是否需要鑒權// if(to.path === '/home/news' || to.path === '/home/message'){if (localStorage.getItem("school") === "xiaoxue") {next();} else {alert("學校名不對，無權限查看");}} else {next();} }, //通過路由規則，離開該組件時被調用 beforeRouteLeave(to, from, next) {console.log('About--beforeRouteLeave',to,from);next() }

十二、路由器的兩種工作模式

1.hash值：#及其后面的內容

#/about 都成為hash值

2.hash值不會成為路徑的一部分，不會包含在HTTP請求中，不會帶給服務器。

3.hash模式：兼容性好

4.history模式：兼容性差，應用部署上線后需要后端支持，解決刷新頁面后404問題

const router = new VueRouter({mode:'hash', //hash為默認值... })

總結

以上是生活随笔為你收集整理的Vue_路由_query参数_params参数_命名路由_props配置_编程式路由导航_缓存路由组件_新的生命周期钩子_全局、独享、组件内路由守卫_路由的两种工作模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。