欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)詳情

 更新時(shí)間:2022年06月09日 11:45:19   作者:??前端_米白????  
這篇文章主要介紹了Vue?動(dòng)態(tài)路由的實(shí)現(xiàn),動(dòng)態(tài)路由是一個(gè)常用的功能,根據(jù)后臺(tái)返回的路由json表,前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng),本文主要實(shí)現(xiàn)的是后臺(tái)傳遞路由,前端拿到并生成側(cè)邊欄的一個(gè)形勢(shì),需要的朋友可以參考一下

前言:

動(dòng)態(tài)路由是一個(gè)常用的功能,根據(jù)后臺(tái)返回的路由json表,前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng),下面來講解一下具體的實(shí)現(xiàn)方式:

大致業(yè)務(wù)需求:前端在login登陸頁,輸入賬號(hào)密碼后,點(diǎn)擊登陸,接口返回登陸成功的同時(shí),也會(huì)把該用戶可操作的路由鏈表返回給前端(JSON數(shù)組格式),前端拿到這個(gè)JSON數(shù)組,來渲染成側(cè)邊欄列表(說的是PC端),我們需要將所有的頁面都寫好,然后去匹配后臺(tái)返回的部分路由來進(jìn)行展示(比如項(xiàng)目一共有100個(gè)頁面,后臺(tái)返回了10個(gè)路由地址,那么我們只展示返回的對(duì)應(yīng)的10個(gè)即可)

說一下思路:

我們可以將路由分為3個(gè)部分:

  • 1.默認(rèn)展示的部分(包括login頁面、404頁面等等)
  • 2.后臺(tái)返回的部分(具有權(quán)限操作的部分路由)
  • 3.全部動(dòng)態(tài)路由(比如后臺(tái)返回了10個(gè)路由地址,我們?nèi)縿?dòng)態(tài)的路由是100個(gè)地址,所做的就是將100個(gè)全部動(dòng)態(tài)路由里面和后臺(tái)返回的對(duì)應(yīng)匹配的10個(gè)路由追加到默認(rèn)路由里面,就可以完成動(dòng)態(tài)路由的流程了)

正常路由,我們的寫法大概是這樣的:

//src/router/index.js
import Router from 'vue-router'
Vue.use(Router)
const Routes = [
    {
        path:'/',
        component:Login,
        meta: {
            title: '登錄頁'
        }
    },
    {
        path:'/Home',
        component:Home,
        meta: {
            title: 'Home主頁'
        }
    }
]
const Routers = new Router({
    routes: Routes
})
export default Routers;

我們要做動(dòng)態(tài)路由,就需要改變一下這個(gè)結(jié)構(gòu)(分為動(dòng)態(tài)+靜態(tài)),這里的靜態(tài)是指需要匹配展示對(duì)應(yīng)的,所以,我們需要在建一個(gè)全部的路由JSON

//stc/router/index.js
const defaultRoutes = [
//...這默認(rèn)路由就是上面代碼內(nèi)的登錄頁/404頁面...
]
const allRouters = [//這里就是全部動(dòng)態(tài)路由
    {
        path:'/UserList',
        component:UserList,
        meta: {
            title: '人員管理'
        }
    },
    {
        path:'/PwdList',
        component:PwdList,
        meta: {
            title: '密碼管理'
        }
    }
]
const Routers = new Router({
    routes: defaultRoutes//默認(rèn)渲染 -> 默認(rèn)路由
})
export default Routers;

所有的靜態(tài)路由和動(dòng)態(tài)路由,都寫完了,接下來就是關(guān)鍵部分(將后臺(tái)返回的路由json拼接到route內(nèi)),由于我們是在login頁面點(diǎn)擊登陸后,進(jìn)行的跳轉(zhuǎn),所以,把代碼寫到路由鉤子內(nèi)(Routers.beforeach函數(shù))

Routers.beforeEach((to,from,next) => {
    if(to.path != '/' && !store.state.isLogin) {
        //跳轉(zhuǎn)的不是首頁 同時(shí) 用戶還未登陸
        //這個(gè)判斷,我們就可以基本判定用戶是在做登陸時(shí)候的跳轉(zhuǎn)
        //↓拿到登陸時(shí),接口返回的路由數(shù)組(vuex內(nèi)),大致是這樣的
        let resRouterArr = [
            {
                routeName: '人員管理',
                children: [
                    {
                        routeName: '銷售管理',
                        ...
                    },
                    {
                        routeName: '內(nèi)勤管理',
                        ...
                    }
                ]
            }
        ]
        let routerArr = []
        resRouterArr.forEach(item => {
            allRouters.forEach(all => {
                if(item.routeName == all.routeName) {
                    //拿到本地路由對(duì)象
                    let obj = JSON.parse(JSON.stringify(all))
                    let childrenRouter = []
                    if(item.children && item.children.length > 0) {
                        item.children.forEach(childItem => {
                            all.children.forEach(allItem => {
                                if(childItem.routeName == allItem.routerName) {
                                    childrenRouter.push(allItem)
                                }
                            })
                        })
                        obj.children = childrenRouter
                    }
                    routerArr.push(obj)
                }
            })
        })
        Routers.addroutes(routerArr)//addroutes為添加路由數(shù)組的方法
        store.commit('domRouteTree',rousterArr)//存儲(chǔ)進(jìn)vuex,之后頁面左右路由列表渲染使用
        next({...to,replace:true})//進(jìn)行路由跳轉(zhuǎn)
    } else {
        next()
    }
})

這樣,我們跳轉(zhuǎn)到之后的業(yè)務(wù)頁面,就可以看到列表左側(cè)生成的動(dòng)態(tài)路由列表了,點(diǎn)擊左側(cè)的幾個(gè)動(dòng)態(tài)生成的路由,也很nice,么得問題~

ps:這里遇到了一個(gè)坑,踩了一會(huì)兒,也記上

以前都是這樣寫的:

import UserList from '@/views/User/UserList'

但是跳轉(zhuǎn)過去之后,頁面就會(huì)出現(xiàn)白屏報(bào)錯(cuò)的情況,查了半天,原來要補(bǔ)齊路徑

import UserList from '@/views/User/UserList.vue'

到此這篇關(guān)于Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 動(dòng)態(tài)路由 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn)

    Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn)

    今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue3如何使用ref獲取元素

    vue3如何使用ref獲取元素

    這篇文章主要介紹了vue3如何使用ref獲取元素,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 關(guān)于vue3中的reactive賦值問題

    關(guān)于vue3中的reactive賦值問題

    這篇文章主要介紹了關(guān)于vue3中的reactive賦值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue2.0/3.0中provide和inject的用法示例

    vue2.0/3.0中provide和inject的用法示例

    provide和inject是成對(duì)出現(xiàn)的,主要用于父組件向子孫組件傳遞數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2.0/3.0中provide和inject用法的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度

    關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度

    這篇文章主要介紹了關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度,高德地圖首先要去申請(qǐng)key和密鑰,文中提供了部分實(shí)現(xiàn)代碼和解決思路,感興趣的朋友可以學(xué)習(xí)一下
    2023-04-04
  • vue3如何自定義js文件(插件或配置)

    vue3如何自定義js文件(插件或配置)

    這篇文章主要介紹了vue3如何自定義js文件(插件或配置),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Swiper在Vue2中的簡單使用方法

    Swiper在Vue2中的簡單使用方法

    這篇文章主要給大家介紹了關(guān)于Swiper在Vue2中的簡單使用方法,swiper是一款現(xiàn)代化的移動(dòng)端輪播組件,可以在Vue中輕松使用,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • vue使用xe-utils函數(shù)庫的具體方法

    vue使用xe-utils函數(shù)庫的具體方法

    這篇文章主要介紹了vue使用xe-utils函數(shù)庫的具體方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • element使用自定義icon圖標(biāo)的兩種解決方式

    element使用自定義icon圖標(biāo)的兩種解決方式

    因?yàn)榘惭b原型圖設(shè)計(jì)實(shí)現(xiàn)頁面,在element自帶的圖標(biāo)庫好像沒有,所以按鈕的圖標(biāo)icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的兩種解決方式,需要的朋友可以參考下
    2022-07-07
  • vue中npm如何設(shè)置倉庫地址

    vue中npm如何設(shè)置倉庫地址

    在使用npm命令時(shí),如果直接從國外的倉庫下載依賴,下載速度很慢,甚至?xí)螺d不下來,我們可以更換npm的倉庫源,提高下載速度,這篇文章主要給大家介紹了關(guān)于vue中npm如何設(shè)置倉庫地址的相關(guān)資料,需要的朋友可以參考下
    2023-12-12

最新評(píng)論