Vue_路由_query参数_params参数_命名路由_props配置_编程式路由导航_缓存路由组件_新的生命周期钩子_全局、独享、组件内路由守卫_路由的两种工作模式
文章目錄
- 一、路由概述
- 二、基本使用
- 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 router4. 實現切換
<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配置_编程式路由导航_缓存路由组件_新的生命周期钩子_全局、独享、组件内路由守卫_路由的两种工作模式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机视觉领域 CCF重要期刊/国际会议
- 下一篇： vue解决mintui中使用Messag