這里寫目錄標題

• 一、路由
• • (1)路由的配置
  • (2)路由的概念
  • • 1、路由的概念
    • • ①參考鏈接
      • ②路由的使用
      • • 第一步-創建組件
        • 第二步-配置router.js
        • 第三步-配置main.js
    • 2、路由的生命周期跟攔截器
    • • ①參考鏈接
      • ②個人理解
      • ③攔截器思路分析
      • ④上面的可以忽略--這里攔截代碼才是重要
• 二、嵌套路由
• • 嵌套路由描述
  • 視覺體驗

一、路由

idea創建vue項目：https://blog.csdn.net/qq_45716444/article/details/116771126

(1)路由的配置

這是我上一張寫的https://blog.csdn.net/qq_45716444/article/details/116783474

(2)路由的概念

1、路由的概念

①參考鏈接

https://baijiahao.baidu.com/s?id=1668019099207124126&wfr=spider&for=pc

我覺得從設計的思想上來說路由是一個映射關系，直白來說就是一個url鏈接對應著一個組件（或多個組件，這個是嵌套路由）。

②路由的使用

要使用路由就先去配置，在上面的鏈接有配置的方法 路由整體的使用分x步 1、創建組件 2、在router.js中配置 3、配置main.js 4、在App.vue中添加 <router-view></router-view>

第一步-創建組件

創建vue組件，這里在src下面創建一個page文件，然后添加下面三個文件 index.vue|login.vue|register.vue,代碼如下 //這是index.vue <template><div>首頁</div> </template><script>export default {name: "index"} </script><style scoped></style> //這是login.vue <template><div>登錄</div> </template><script>export default {name: "login"} </script><style scoped></style> //這是register.vue <template><div>注冊</div> </template><script>export default {name: "register"} </script><style scoped></style>

第二步-配置router.js

在src下面創建一個router文件夾，在這個文件夾里面創建一個router.js文件，在 這個文件中寫如下代碼 //1、引入文件 import VueRouter from "vue-router"; //2、實例化VueRouter對象 const router = new VueRouter({//這個是寫映射關系的對象routes:[{path: '/',redirect:'/login'},{//這個是 把/index 與 ./page/index.vue 這個文件對應起來，到時候//在url地址欄直接訪問 localhost:8080/index 可以訪問到index.vue這個文件path: '/index',component:()=>import("@/page/index")},{path: '/login',component:()=>import("@/page/login")},{path: '/register',component:()=>import("@/page/register")}] })//3、拋出對象，最后會在main.js中引用 export default router

第三步-配置main.js

在src項目下找到main.js，添加以下代碼 //導入路由文件，為了在App.vue中使用<router-view></router-view> import VueRouter from "vue-router"; Vue.use(VueRouter) //引入router.js中拋出的路由對象 import router from "@/router/router" new Vue({render: h => h(App),//最后一定記得把router對象放到這里router }).$mount('#app')

2、路由的生命周期跟攔截器

①參考鏈接

https://blog.csdn.net/qq_38128179/article/details/100072962

②個人理解

這里我針對上面的進行一些總結：路由的生命周期主要分成三大部分，全局守衛/組件 守衛/路由守衛。那什么是全局守衛呢？全局守衛就是在路由開始跳轉到結束轉的整個過程，這個跳 轉，是所有的路由跳轉。 也就是說，無論是從首頁跳轉到登錄頁，還是注冊頁跳轉到登 錄頁都會觸發全局守衛 對應的函數（鉤子函數），我們的重點就是這個過程里面的 beforeEach ，做攔截。那什么是全局守衛呢？顧名思義，那寫函數（鉤子函數）的作用范圍是在單個組件內，也就是在一個Vue的實例中最后一個路由守衛，它的作用域是在路由VueRouter中的routes單個對象中 路由里面的函數為什么叫鉤子函數?鏈接在下面

https://blog.csdn.net/hhtSeeTheWorld/article/details/113525999

③攔截器思路分析

在寫攔截器之前，我們來模擬一個場景。在登錄頁，我們需要經過登錄才能進入 首頁，所以在我們沒有登錄之前，我們就不能訪問首頁，那這個路由請求是不是得欄 截下來。那我們應該怎么實現呢？我們跳轉的時候，是要輸入一個url，那我們就檢查這個url。如果我們登錄了， 就可以進入，如果沒有登錄就攔截。所以，我們要判斷url吧，要判斷是否登錄吧。 判斷url的話，可以來一個白名單（數組存一下不用登錄就可以進入的頁面路由就行 了）。判斷是否登錄過，我們可以把登錄過的信息存到瀏覽器緩存中，用到的時候再拿出來就行了。那我們在路由的生命周期中的哪一個過程進行攔截呢？？我們要判斷所有的請求，那肯定是在全局中守衛中攔截，也就是說beforeEach | beforeResolve 兩個，為啥是這兩個，而不是三個，因為afterEach沒有next。那到底要選哪一個？？對比下面那張圖，其實會發現。beforeEach | beforeResolve 周期位置不一樣，我們 既然要攔截，那被攔截下來的就沒必要執行下面的那么多了，直接在beforeEach攔截就行了

④上面的可以忽略–這里攔截代碼才是重要

這里我們的重點是要存一個 登錄的信息 還有存一個白名單路由 //這個是在 src/router/router.js 中寫的代碼。注意這個代碼是跟上面的連貫下來的，上面的步驟連貫下來的，上面剛剛開始寫路由那里 import {Message} from "element-ui" const notNeedLogin = ["/login"] //白名單，這個/index，在路由配置中有 router.beforeEach((to,from,next)=>{//判斷請求路由是否是白名單的，如果不是就返回-1if (notNeedLogin.indexOf(to.path) == -1){//如果路由不是白名單中的，那就判斷是否登錄，如果每登錄就攔截（不執行next()）if(localStorage.getItem('token') == null){next("/login")Message.warning("請登錄")}}next() }) //下面代碼放到login.vue中,全部覆蓋啊，把login.vue中的內容全部換成下面的就行了 <template><div>登錄<el-button @click="token">存token</el-button><el-button @click="l">首頁</el-button><el-button @click="r">退出</el-button></div> </template><script>export default {name: "login",methods:{token(){//把token存到緩存localStorage.setItem("token","sdsd")},l(){this.$router.push('/index')},r(){//把token移除緩存localStorage.removeItem('token')}}} </script><style scoped></style>

二、嵌套路由

嵌套路由描述

嵌套路由就是在上面寫的一個路由里面再寫子路由。然后最終的顯示效果是子路由的 頁面再加上父路由的頁面效果。這里主要是要解決什么問題呢？我們再來描述一下一個場景，當我們主頁需要一個布局，而布局是整個主頁的重要部 分，然后布局里面的東西是不停的在變化，也就是說，我們有10個頁面，都需要到這個 布局。如果使用單路由的話，我們會給每一個組件都復制上重復的代碼，就很麻煩，那 我們可不可以利用路由去減少這個代碼量呢，答案是可以的。描述是抽象的，下面我們 用視覺來體驗一下這個案例

視覺體驗

【1】導入element-ui https://blog.csdn.net/qq_45716444/article/details/116783474
【2】主頁的布局

//復制到index.vue文件中，index的全部代碼 <template><div style="height: 100%">//這個是element組件 https://element.eleme.cn/#/zh-CN/component/container<el-container style="height: 100%"><el-aside width="200px" style="background-color: darkgrey">Aside</el-aside><el-container><el-header style="background-color: #42b983">Header</el-header><el-main style="background-color: #2c3e50">Main</el-main><el-footer style="background-color: skyblue">Footer</el-footer></el-container></el-container></div> </template><script>export default {name: "index"} </script>

【3】引入問題我們在src/page下面多創建了r.vue和l.vue，然后我們這些頁面都需要index.vue中的布局代碼，除了復制粘貼代碼可以實現，還有另一種，就是使用嵌套路由。

//l.vue <template><div><h1 color="red">這個是l頁面</h1></div> </template><script>export default {name: "l"} </script><style scoped></style> //r.vue <template><div><h1 color="white">這個是r頁面</h1></div> </template><script>export default {name: "r"} </script><style scoped></style>

【4】嵌套路由代碼

//代碼寫在router/router.js中 //2、實例化VueRouter對象 const router = new VueRouter({//這個是寫映射關系的對象routes:[{path: '/',redirect:'/login'},{//這個是 把/index 與 ./page/index.vue 這個文件對應起來，到時候//在url地址欄直接訪問 localhost:8080/index 可以訪問到index.vue這個文件path: '/index',component:()=>import("@/page/index"),//下面這個是嵌套路由children:[{path: '/r',component: () => import("@/page/r")},{path: '/l',component: () => import("@/page/l")}]},{path: '/login',component:()=>import("@/page/login")},{path: '/register',component:()=>import("@/page/register")}] })

//index.vue的代碼，全部代碼 <template><div style="height: 100%"><el-container style="height: 100%"><el-aside width="200px" style="background-color: darkgrey"></el-aside><el-container><el-header style="background-color: #42b983"></el-header><el-main>//這個不能拉下<router-view></router-view></el-main><el-footer style="background-color: skyblue"></el-footer></el-container></el-container></div> </template><script>export default {name: "index"} </script>

【5】運行效果

總結

以上是生活随笔為你收集整理的3、vue-路由、拦截器和嵌套路由的全部內容，希望文章能夠幫你解決所遇到的問題。

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