6-动态路由

前文提到用户可以通过url访问到不属于自己权限的页面,这需要通过动态路由来解决

1.将后端返回的菜单数据存储到Cookie之后,调用状态管理中添加路由方法

javascript 复制代码
//调用store中的setMenu函数
 this.$store.commit('setMenu',data.data.data)
 // 动态路由配置
 this.$store.commit('registerouter',this.$router)
java 复制代码
//添加路由方法
//动态注册路由
registerouter(state, router) {
    // 没有数据
    if (!Cookie.get("menu"))
        return;
    //有数据
    const menu = JSON.parse(Cookie.get("menu"))
    state.menu = menu;
    //动态组装路由
    const menuArray = []
    menu.forEach(item => {
            if (item.children) { //有子菜单
                item.children = item.children.map(item => {
                    item.component = () =>
                        import (`../views/${item.url}`)
                    return item
                })
                menuArray.push(...item.children)
            } else { //没有子菜单
                item.component = () =>
                    import (`../views/${item.url}`)
                menuArray.push(item)
            }
        })
        // console.log(menuArray, "menu")
        //路由的动态添加
    menuArray.forEach(item => {
        router.addRoute('Main', item)
    })
}

3.router下的index.js文件如下

javascript 复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
    //创建路由组件
import Main from '../views/Main.vue'
import Login from '../views/Login.vue'
//将路由与组件进行映射
const routes = [

        {
            path: '/login',
            name: 'login',
            component: Login,
        },
        //主路由
        {
            path: '/',
            component: Main,
            name: 'Main',
            redirect: '/home', //路径为 / 时,重定向到home
            //子路由
            children: []
        }
    ]
    //创建router实例
const router = new VueRouter({
    routes
})
export default router

4.注意:此时虽然可以实现动态路由,但是刷新页面则会失效,在main.js文件中也需要调用添加路由方法

javascript 复制代码
new Vue({
    router, //将router挂载到vue实例上
    store, //将store挂载到vue实例上
    render: h => h(App),
    created() {
        store.commit('registerouter', router)
    }
}).$mount('#app')
相关推荐
恋猫de小郭4 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆7 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼17 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子19 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆19 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了20 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆25 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆26 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆26 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆27 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js