【Vue】12 VueRouter Part2 路由與傳參
阿新 • • 發佈：2020-07-26
【程式設計式導航】
我們希望在路由跳轉之前執行某一些功能。。。
<template> <div id="app"> <h2>這是App.vue元件的標題</h2> <router-link to="/home"> 首頁 </router-link> <br> <router-link to="/sample" > 樣本 </router-link> <br> <button @click="avent"> 事件跳轉首頁 </button><router-view></router-view> </div> </template> <script> export default { name: 'App', methods : { avent() { console.log('跳轉到首頁'); this.$router.push("/home"); } } } </script> <style lang="stylus"> #app font-family Avenir, Helvetica, Arial, sans-serif -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale text-align center color #2c3e50 margin-top 60px</style>
效果：
【懶載入路由】
打包之後JS檔案會非常龐大，影響到頁面的載入
如果我們能讓不同的路由，對應的元件分割成不同的程式碼塊
路由被訪問的時候才能被載入元件，這樣就高效了
路由懶載入的作用是由路由對應的元件打包成一個小的JS程式碼塊
只有這個元件的路由被訪問時才會載入JS程式碼塊
index.js中配置：
import Vue from 'vue'; import VueRouter from "vue-router"; // 匯入路由外掛 //import home from "../components/home"; //import sample from "../components/sample";const home = () => import('../components/home'); // 頭部宣告式 懶載入 Vue.use(VueRouter); //注入路由外掛 const routes = [ { path : '/home', component : home }, { path : '/sample', component : () => import('../components/sample') } // 物件內直接宣告 懶載入 ]; // 定義路由 const router = new VueRouter({ // 建立路由例項 routes, mode : 'history' }); export default router; // 匯出路由例項
不知道啥問題。。。
【路由巢狀】
在首頁元件中又設定了兩個連線路由：
<template> <div> <h2>這是首頁元件</h2> <p>這是首頁的內容</p> <router-link to="/news"> 新聞 </router-link> <br> <router-link to="/msg"> 訊息 </router-link> </div> </template> <script> export default { name: "home" } </script> <style scoped> </style>
可以看到首頁下面這兩個元件：
然後點選新聞發現，上一級的首頁元件不能儲存：
所以我們需要巢狀路由，首先
首頁元件頁設定view標籤
其次，在indexjs種設定子元件，並放入新聞和訊息元件：
import Vue from 'vue'; import VueRouter from "vue-router"; // 匯入路由外掛 import home from "../components/home"; import sample from "../components/sample"; import news from "../components/news"; import msg from "../components/msg"; Vue.use(VueRouter); //注入路由外掛 const routes = [ { path : '/home', component : home, children : [ // 配置子路由 { path : '/news', component : news }, { path : '/msg', component : msg } ] }, { path : '/sample', component : sample }, ]; // 定義路由 const router = new VueRouter({ // 建立路由例項 routes, mode : 'history' }); export default router; // 匯出路由例項
看起來問題像是解決了
我們地址也一應該保證這樣的層級關係：
index.js路由地址：
{ path : 'news', component : news },
{ path : 'msg', component : msg }
【路由傳參】
路由跳轉可以引數傳遞，引數分為兩種：Params & QueryParams
【Params型別】
配置路由格式：
/new/:id
這樣就表示，我們在使用新聞元件的時候需要在後面傳id引數
/news/24
如果不給予引數，則元件不會顯示
加上引數訪問：
【QueryParams】
配置路由方式不變，但是採用的是原生URL引數傳遞
我這裡沒用，沒有那個效果。。。
控制檯也沒報錯。。。
【Router-Link傳參】
<router-link :to="{ path : '/home/news', query : { id : 2, name : '張三', age : 23, gender : true, hobby : [1,2,3,4,5] } }" > 新聞 </router-link>
url地址渲染：
http://192.168.2.174:8080/home/news?id=2&name=%E5%BC%A0%E4%B8%89&age=23&gender=true&hobby=1&hobby=2&hobby=3&hobby=4&hobby=5
【JS程式碼傳參】
<template> <div id="app"> <h2>這是App.vue元件的標題</h2> <router-link to="/home"> 首頁 </router-link> <br> <router-link to="/sample" > 樣本 </router-link> <br> <button @click="avent"> 事件跳轉首頁 </button> <br> <button @click="toNews"> 事件跳轉home2 </button> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods : { avent() { console.log('跳轉到首頁'); this.$router.push("/home"); }, toNews() { this.$router.push({ path : "/home/news", query : { id : 33, name : "阿偉", age : 32, gender : true, others : [1,3,5,7,9] } }); } } } </script> <style lang="stylus"> #app font-family Avenir, Helvetica, Arial, sans-serif -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale text-align center color #2c3e50 margin-top 60px </style>
點選傳遞：
http://localhost:8080/home/news?id=33&name=%E9%98%BF%E4%BC%9F&age=32&gender=true&others=1&others=3&others=5&others=7&others=9
【引數獲取】
在新聞元件中增加一個控制檯列印檢視：
<template> <div> <h2>新聞組建</h2> <p>新聞內容</p> </div> </template> <script> export default { name: "news", created() { console.log(this.$route); } } </script> <style scoped> </style>
訪問測試：
這種方法必須要求：id賦值，然後才可以查詢引數賦值
試試引數重複賦值時情況如何？
其實在這裡就很明確了，params就是我們配置的格式：
改格式要求必須注入引數：RestFul風格
而query可以給也可以不給
現在列印這個引數看看：
console.log(this.$route.params.id);
效果：
【路由監聽】
每次請求訪問都會被獲取到
<template> <div id="app"> <h2>這是App.vue元件的標題</h2> <router-link to="/home"> 首頁 </router-link> <br> <router-link to="/sample" > 樣本 </router-link> <br> <button @click="avent"> 事件跳轉首頁 </button> <br> <button @click="toNews"> 事件跳轉home2 </button> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods : { avent() { console.log('跳轉到首頁'); this.$router.push("/home"); }, toNews() { this.$router.push({ path : "/home/news", query : { id : 33, name : "阿偉", age : 32, gender : true, others : [1,3,5,7,9] } }); } }, watch : { '$route.path' : function (newVal, oldVal) { console.log(newVal); } } } </script> <style lang="stylus"> #app font-family Avenir, Helvetica, Arial, sans-serif -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale text-align center color #2c3e50 margin-top 60px </style>
請求在這裡都會被捕獲到：
但是使用位址列輸入的方式就不會捕獲
也就是說，這些都是我們在元件中使用的跳轉，是由router執行的，這種方式的捕獲僅限於router設定的
【$route & $router的區別？】
$router是vue-router的例項，導航到不同的URL中使用$router.push方法
$route是當前router的跳轉物件，可獲取name,path等等資訊