3、vue-路由、拦截器和嵌套路由
生活随笔
收集整理的這篇文章主要介紹了
3、vue-路由、拦截器和嵌套路由
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里寫目錄標題
- 一、路由
- (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】主頁的布局
【3】引入問題我們在src/page下面多創建了r.vue和l.vue,然后我們這些頁面都需要index.vue中的布局代碼,除了復制粘貼代碼可以實現,還有另一種,就是使用嵌套路由。
【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-路由、拦截器和嵌套路由的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GNU GRUB手册之安装(一)
- 下一篇: 关于A6s上的无法动态修改maxLeng