vue addRoutes路由動態(tài)加載操作
需求:增加權限控制,實現不同角色顯示不同的路由導航
思路:每次登陸后請求接口返回當前角色路由
核心方法:vue-router2.2.0的addRoutes方法 + vuex
以下是我實現的獲取菜單路由的方法,我將該方法的調用放在首頁組件的生命鉤子中,即便用戶刷新瀏覽器清空了路由還是會重新調用接口獲取,不至于會丟失。同時考慮到會有切換用戶的可能,所以不將獲取到的路由信息保存到cookie或者localstorage當中
獲取菜單之前先判斷routerState,避免多次請求, 我這里使用element-ui的導航菜單功能v-for循環(huán)this.myRouter參數即可顯示動態(tài)路由導航
/**
* 獲取菜單
*/
getMenu () {
if (this.$store.getters.routerState === false) {
// 清理已經存在的動態(tài)路由
this.clearDynamicRoute()
// 更改請求路由狀態(tài)為true
this.$store.commit('SET_ROUTERSTATE', true)
getMyMenu().then((res) => {
if (res.code === '0') {
// 格式化路由,將數據轉為addRoutes可接受的route格式數組
let myMenu = this.formatMenu(res.data.menu)
if (myMenu.length <= 0) { // 沒有動態(tài)路由
return
}
for (let index = 0; index < myMenu.length; index++) {
// 將請求的路由先存放到options對象中
this.$router.options.routes.push(myMenu[index])
}
// 將完整需要顯示的路由添加進去
this.$router.addRoutes(this.$router.options.routes)
// 這里將路由顯示在頁面上
this.MyRouter = this.$router.options.routes
}
// 在這里就可以打印出新路由
console.log(this.$router)
})
}
}
補充知識:vue+element 進入不同路由頁面(二級頁面),讓相應的左側菜單
路由配置
{
path: '/finance',
name: 'Finance',
meta: {
title: '財務'
},
component: () =>
import('@/components/Finance'),
redirect: '/finance/code/code',
children: [{
path: '/finance/code',
name: 'financeindex',
meta: {
title: '稅收配置'
},
redirect: '/finance/code/code',
component: () =>
import('@/components/finance/financeindex'),
children: [{
path: '/finance/code/code',
name: 'FinanceCode',
hidden: false,
active:'/finance/code', //這里是在左側菜單顯示并且需要選中的
meta: {
title: '稅收編碼(金稅)'
},
component: () =>
import('@/components/finance/code/Code'),
},
{
path: '/finance/code/codeimportrecord', // 這個路由進入的界面是 稅收編碼(金稅)的二級頁面, 當進入這個頁面的時候,需要菜單中的稅收編碼(金稅)顯示選中
name: 'FinanceCodeImportRecord',
hidden: true,
meta: {
title: '稅收編碼導入記錄'
},
component: () =>
import('@/components/finance/code/CodeImportRecord'),
},
{
path: '/finance/classcode/classcode',
name: 'FinanceClassCode',
hidden: false,
active:'/finance/classcode', //為了省事,只給需要在左側顯示的路由添加active屬性
meta: {
title: '分類稅收編碼確認'
},
component: () =>
import('@/components/finance/classCode/ClassCode'),
},
]
}, ]
element
<template>
<div class="leftnav">
<!--<div class="" v-for="nav in navs">
<div class="LiHeader">
{{nav.name}}
</div>
<li v-for="item in nav.san">
{{item.name}}
</li>
</div>-->
<el-menu
style="text-align: left;"
:default-active=this.show // 這是的值是指與 el-menu-item中:index的值對應的那一天顯示選中(正常情況就是一個頁面一個路由,進入那個路由,對應的導航菜單需要選中)
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#282b33"
text-color="#bcbcbc"
active-text-color="#ffffff">
<div class="" v-for="(nav,index) in navs" :key="index" style="width: 200px;">
<div class="" style="color: #ffffff;height: 40px;line-height: 40px;padding-left: 20px;font-size: 16px;">
{{nav.meta.title}}
</div>
<el-menu-item @click="clickroute(item.path)" v-for="(item,index) in nav.children" v-if="!item.hidden" :key="index" :index="item.active"(這里原來是item.path) style="height: 40px;line-height: 40px;">{{item.meta.title}}</el-menu-item>
</div>
</el-menu>
</div>
</template>
<script>
js
data() {
return {
navs:[],
show:null //初始化上面:default-active綁定的值
}
},
created() { //// 頁面載入的時候,拿到url,用/拆開,然后拼起來前兩個路徑,并且賦值, 這個時候show對應的就是路由表中的 avtive,
let route=this.$route.path.split('/')
let vueRouter=this.$router.options.routes.filter(router=>{return router.path=='/'})[0].children
let filterVuerouter=vueRouter.filter(router=>{return '/'+route[1] == router.path })
this.navs=filterVuerouter[0].children
console.log(this.navs)
let router ='/'+route[1]+'/'+route[2]
console.log(router)
this.show=router
// console.log(this.show)
},
mounted() {
},
以上這篇vue addRoutes路由動態(tài)加載操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue使用動態(tài)添加路由(router.addRoutes)加載權限側邊欄的方式
- vue 解決addRoutes多次添加路由重復的操作
- 使用VueRouter的addRoutes方法實現動態(tài)添加用戶的權限路由
- vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決
- vue 解決addRoutes動態(tài)添加路由后刷新失效問題
- vue addRoutes實現動態(tài)權限路由菜單的示例
- vue-router+vuex addRoutes實現路由動態(tài)加載及菜單動態(tài)加載
- vue-router4動態(tài)路由刷新404/白屏的解決
- vue訪問未定義的路由時重定向404問題
- vue3動態(tài)路由刷新后空白或者404問題的解決
- vue 項目中當訪問路由不存在的時候默認訪問404頁面操作
- vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉404路由的問題解決方案
相關文章
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3?element-plus?實現表格數據更改功能詳細步驟
這篇文章主要介紹了vue3 element-plus實現表格數據更改功能,本文分步驟結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
vue3+vite實現低版本瀏覽器兼容的解決方案(出現白屏問題)
項目全線使用vue3的時候,自然使用的是配套更加契合的vite打包工具,于是自然而然會用到很多新的語法,本文給大家介紹了vue3+vite實現低版本瀏覽器兼容的解決方案(出現白屏問題),需要的朋友可以參考下2024-04-04

