文章目錄

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

一、路由概述

一個(gè)路由就是一組key:value的對(duì)應(yīng)關(guān)系（key為路徑，value可能是function或component）

前端路由：（value是component）用于展示頁面內(nèi)容，當(dāng)瀏覽器的路徑改變時(shí)，對(duì)應(yīng)的組件就會(huì)顯示。

多個(gè)路由需要經(jīng)過路由器的管理

router包含多個(gè)route規(guī)則（/class => 班級(jí)組件 、/subject => 學(xué)科組件）

vue-router 專門用來實(shí)現(xiàn)SPA應(yīng)用

注： SPA頁面（單頁面應(yīng)用）（只有一個(gè)完整的頁面）

（點(diǎn)擊頁面中導(dǎo)航鏈接不會(huì)刷新頁面，只會(huì)做頁面的局部更新）

二、基本使用

router-link最終轉(zhuǎn)換為a標(biāo)簽

1. 安裝vue-router

npm i vue-router

2. 應(yīng)用插件

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

3.編寫router配置項(xiàng)

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

4. 實(shí)現(xiàn)切換

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

注：router-link最終轉(zhuǎn)換為a標(biāo)簽，:to類似于href，active-class可配置高亮樣式

5. 指定組件的呈現(xiàn)位置

<router-view></router-view>

注：

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

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

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

• 整個(gè)應(yīng)用只有一個(gè)router，可以通過組件的$router屬性獲取到

多級(jí)路由（嵌套路由）

1.配置路由規(guī)則，使用children配置項(xiàng)

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

2.跳轉(zhuǎn)（寫完整路徑）

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

三、路由的query參數(shù)

1.傳遞參數(shù)

（Message.vue內(nèi)）

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

2.接收參數(shù)

（Detail.vue內(nèi)）

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

四、命名路由

（簡化路由的跳轉(zhuǎn)）

1.命名

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

2.簡化跳轉(zhuǎn)

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

五、路由的params參數(shù)

1.配置路由，聲明接收params參數(shù)

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

2.傳遞參數(shù)

（Message.vue內(nèi)）

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

注：攜帶params參數(shù)時(shí)，若使用to的對(duì)象寫法，則不能使用path配置項(xiàng)，必須使用name配置

3.接收參數(shù)

（Detail.vue內(nèi)）

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

六、路由的props配置

讓路由組件更方便的收到參數(shù)

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

Detail.vue內(nèi)接收

props:['id','title']

七、 <router-link> 的replace模式

（控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式）

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

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

八、編程式路由導(dǎo)航

（不借助<router-link>實(shí)現(xiàn)路由跳轉(zhuǎn)）

Message.vue內(nèi)兩個(gè)按鈕的點(diǎn)擊事件的具體內(nèi)容

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() //前進(jìn) this.$router.go(-2) //正數(shù)連續(xù)前進(jìn)n步，負(fù)數(shù)連續(xù)后退n步

九、緩存路由組件

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

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

十、兩個(gè)新的生命周期鉤子

路由組件獨(dú)有的，用于捕獲路由組件的激活狀態(tài)

activated：路由組件被激活時(shí)觸發(fā)

deactivated：路由組件失活時(shí)觸發(fā)

十一、路由守衛(wèi)

保護(hù)路由的安全（權(quán)限）

1.全局路由守衛(wèi)

index.js內(nèi)

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

注：meta：路由元信息，在路由組件內(nèi)添加，設(shè)置isAuth值為true的組件需要鑒權(quán)

? next()：放行

2.獨(dú)享路由守衛(wèi)

某一個(gè)路由所獨(dú)享的，在其路由配置內(nèi)編寫。（只有前置沒有后置）

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

3.組件內(nèi)路由守衛(wèi)

在組件內(nèi)編寫。

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

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

1.hash值：#及其后面的內(nèi)容

#/about 都成為hash值

2.hash值不會(huì)成為路徑的一部分，不會(huì)包含在HTTP請(qǐng)求中，不會(huì)帶給服務(wù)器。

3.hash模式：兼容性好

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。