「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言
學完Vuex方面的操作就該來學學Vue中的路由操作了… xdm沖
一、安裝
vue-cli 安裝
vue add router做完這一步基礎環境都搭好了。
項目中會多一個
文件夾，內容如下：
最后暴露出來，在mian.js 中引用進去就可以了。暫時先不細講。
二、基本路由使用
基本路由使用，其實你安裝完就已經有例子啦。
在App組件中 有下面這兩行代碼，其實就路由跳轉的意思。
<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> |我們以前是用a標簽，這里只是幫我們封裝了。這里配置好的/及/about都是router文件夾下配置好的路由規則，每個路徑和哪個組件相對應。
效果如下：
點擊就能跳轉.
這是最基礎的,看看就完事了,因為咱們使用這種方式挺少的,基本上在路由跳轉的過程中都是要做很多事情的.
但是大家發現了沒有，只有內容變了，為啥呢？
因為app組件中<router-view/> 這個代碼，意思就是切換路由時，將組件內容放到這里展示。
這最基本的，大家隨便玩玩都會的，咱們不多說。
問個小問題，這個路由跳轉的過程中，原來的哪個組件是被隱藏了，還是銷毀了呢？？？
三、嵌套路由(套娃)
效果圖：
就是在home和about下分別來個路由，也非常容易。
我們先加兩個組件
我們再router中進行配置一下。
const routes = [{path: '/',name: 'Home',component: Home,children: [{path: '/message',name: 'message',component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),}]},{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),children: [{path: '/news',name: 'news',component: () => import(/* webpackChunkName: "about" */ '../components/News.vue'),},]} ]其實也就牽扯到children這一個屬性，就是和上級路由形成父子關系啦。套娃兩層是這么套，那么套再多就是在里面接著寫就完事了。
一次套娃一次爽，一直套娃一直爽
四、路由傳參
效果
我們再加一個兩個子路由，在里面實現路由傳參。另外把原來的組件改一下。
4.1、搭建基礎環境
MessageItem組件
<template><div><p>消息編號：???<//p><p>消息標題：???<//p></div> </template>NewsItem組件
<template><div><p>新聞編號：???</p><p>新聞標題：???</p></div> </template> <script>這里的??？是稍后用來接收路由傳參的哈。
News組件
<template><div><ul><li v-for="newItem in news" :key="newItem.id"><router-link to="/item">{{newItem.id}}:{{newItem.title}}</router-link></li></ul><router-view></router-view></div> </template> <script> export default {data(){return {news:[{id:1, title:"001新聞"},{id:2, title:"002新聞"},{id:3, title:"003新聞"}]}} } </script>Message組件
<template><div><ul><li v-for="message in messages" :key="message.id"><router-link to="/item">{{message.id}}:{{message.title}}</router-link></li></ul><router-view></router-view></div> </template> <script> export default {data(){return {messages:[{id:1, title:"001信息"},{id:2, title:"002信息"},{id:3, title:"003信息"}]}} } </script>4.2、query參數
第一種：to 的字符串寫法
URL傳參，組件用$route.query 取值
Message組件
<li v-for="message in messages" :key="message.id"><router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link> </li>注意這里的 to前面是加了引號的，并且中間的 內容也是用 **`**符號修飾的
MessageItem組件
<div><p>消息編號：{{$route.query.id }}</p><p>消息標題：{{$route.query.title }}</p> </div>第二種：to的對象方法
<li v-for="message in messages" :key="message.id"><!-- to的字符串寫法 --><!-- <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link> --><!-- to的對象寫法 --><router-link :to="{path: '/item',query: {id: message.id,title: message.title}}">{{message.id}}:{{message.title}}</router-link></li>另外一邊接收的方式還是同上。
4.3、params參數
第一種：to的字符串寫法
跳轉鏈接還是差不多的，但是必須在路由規則中進行配置
<router-link :to="`/item/${message.id}/${message.title}`">{{message.id}}:{{message.title}}</router-link> {path: '/',name: 'Home',component: Home,children: [{path: '/message',name: 'message',component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),children: [{path: '/item/:id/:title', // 使用占位符聲明接收params參數name: 'messageItem',component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue')}]}]},接收的也稍稍有變化：
<p>消息編號：{{$route.params.id }}</p> <p>消息標題：{{$route.params.title }}</p>第二種：to的對象寫法
<!-- to的對象寫法 --> <router-link :to="{name: 'messageItem',params:{id:message.id,title: message.title}}">{{message.id}}:{{message.title}}</router-link>注意：這里必須用 name ，即配置好的路由名稱，不能夠使用路由路徑。
4.4、路由的props配置（偷懶的好工具）
我們思考一個問題哈。
你有沒有覺得{{$route.params.id }}或者{{$route.params.title }} 這樣子去取一個路由傳過來的值，十分重復呢？？？
取每個值，都還要寫一遍$route.params 或者是$this.query這個前綴，有沒有覺得十分重復，那么有沒有更簡單的呢？
（一個兩個還是簡單的，萬一有天傳的多了，這個props肯定是能偷懶的哈🐥）
1）props配置方式一：
{path: '/',name: 'Home',component: Home,children: [{path: '/message',name: 'message',component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),children: [{path: '/item/:id/:title',name: 'messageItem',component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),//第一種方式：props值為布爾值，布爾值為true，則把路由收到的所有params參數通過props傳給MessageItem組件props:true}]}] },傳遞 params 參數的父組件啥都不用改，
我們改一下接收的子組件
<template> <div><!-- <p>消息編號：{{$route.query.id }}</p> <p>消息標題：{{$route.query.title }}</p> --><!-- <p>消息編號：{{$route.params.id }}</p> <p>消息標題：{{$route.params.title }}</p> --><!-- 通過props 接收 --><p>消息編號：{{id }}</p><p>消息標題：{{title }}</p></div> </template> <script>export default {props:['id','title']} </script>2）props配置方式二：
思考一下，上面的那個方法只能解決傳遞params參數時進行縮寫，那么如果是傳遞query參數方式該怎么辦呢？
props 配置其實可以改成一個函數的哈
注意：記得在練習的時候，
{path: '/',name: 'Home',component: Home,children: [{path: '/message',name: 'message',component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),children: [{path: '/item',name: 'messageItem',component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),// props:true//第二種寫法：props值為函數，該函數返回的對象中每一組key-value都會通過props傳給MessageItem組件props($route) {return {id: $route.query.id,title: $route.query.title}}}]}]},想接收什么，我們就是在這邊寫啥就完事了，到了子組件，就是直接用了。
解構寫法
props({query}) {return {id: query.id,title: query.title} }更偷懶的就是連續解構：
props({query:{id,title}}) {return {id,title} }果然是偷懶使人進步啊。
五、編程式路由
5.1、編程式實現路由跳轉
之前我們都是借助 <router-link to="/news">新聞</router-link> 這個來實現路由的跳轉，但實際開發中都是通過點擊按鈕或者是觸發什么事件，然后才進行跳轉的，所以使用router-link并不是特別合適。才有了編程式路由。
<li v-for="message in messages" :key="message.id"><router-link:to="{path: '/item',query: {id: message.id,title: message.title,},}">{{ message.id }}:{{ message.title }}</router-link>|<button type="button" @click="showMessageItem( message.id, message.title,)">點擊跳轉到{{ message.title }}頁面</button></li>利用方法進行跳轉
methods: {showMessageItem(id,title){this.$router.push({path: '/item',query: {id: id,title:title}})} }如果是params 也是和之前一樣的；
showPamarsMessageItem(id,title){this.$router.push({name: 'messageItem',params: {id: id,title:title}}) }相關的信息也要改哈，路由中配置的props啥的。
5.2、編程式控制前進后退
對于瀏覽器中的前進后退按鈕，我們大家肯定是不陌生哈。
其實這個也是可以用編程式的方式來實現的。
<template><div id="app"><button id="back" @click="back">后退</button> | <button id="forward" @click="forward">前進</button> |<button id="forward" @click="go">go</button><div id="nav" ><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |</div><router-view/></div> </template><script> export default {methods: {back(){console.log(this.$router)this.$router.back()},forward(){this.$router.forward()},go(){//直接說這個go () 的參數是一個數字 ，正數就是前進多少步，// 負數就是回退多少步。this.$router.go(2)}} } </script>其實都是通過$router上的api來實現的，但是如果是無痕狀態下，還是無法實現的，因為這些實現還是需要依靠瀏覽器的歷史記錄的。
效果圖：
六、緩存路由組件
作用：讓不展示的路由組件保持掛載，不被銷毀。
我們在MessageItem組件中寫上一個beforeDestroy銷毀之前的鉤子函數
<template><div><p>消息編號：{{ id }}</p><p>消息標題：{{ title }}</p></div> </template> <script> export default {name: 'MessageItem',props:['id','title'],beforeDestroy(){console.log('MessageItem組件被銷毀了')} } </script>當我們從MessageItem組件切換到其他頁面時，就會打印出這個。
但是如果我們在使用他的父組件身上改成下面這樣的。
<keep-alive include="MessageItem"> <router-view></router-view> </keep-alive>注意:include中寫的是組件名。組件名。組件名。
如果不寫include，是默認全部都緩存，不銷毀。
這樣寫就會保證MessageItem在切換的過程中不會被銷毀。
如果切換的異常頻繁的話，我覺得加上這個還是可以的。
七、兩個新的生命周期鉤子函數
在第六小節，我們可以把組件進行緩存，但是同時也會造車組件的beforeDestroy生命周期鉤子函數失效。
那么有些清除操作將會沒法執行（如切換路由，讓定時器暫停），所以就有了兩個路由的獨有的生命周期鉤子函數。
后語
大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。
紙上得來終覺淺，絕知此事要躬行。
大家好，我是博主寧在春：主頁
一名喜歡文藝卻踏上編程這條道路的小青年。
謝謝你，能夠看到這里。
總結
以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你有没有觉得邮件发送人固定配置在yml文
- 下一篇： vue中的if判断和for循环语句