什么叫动态路由呢?顾名思义就是程序员眼中的硬编码与非硬编码的区别。

还是拿之前的静态路由来做对比

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const globalRoutes = [
  {path: '/test', component: () => import('pages/Test.vue')}
]

const router = new Router({
  mode: 'hash',
  isAddDynamicMenuRoutes:false,
  scrollBehavior: () => ({y: 0}),
  routes: globalRoutes
})


export default router

这是我们之前的写法。

现在我们需要将

const globalRoutes = [
  {path: '/test', component: () => import('pages/Test.vue')}
]

这段代码里路由动态化,从而实现动态路由加载的过程。

首先要实现这个目的,你的了解router的生命钩子。

我们这里实现这个目的只用到 beforeEach 这一个方法,下面我们来实现这一过程。感兴趣的老铁可以去看vuerouter官网的介绍。

首先我们模拟一个后台请求,创建nav.js

export const nav = [
  {label:'主页',url:'Index',icon:'home'},
  {label:'测试',url:'Test',icon:'all_inclusive'},
]

然后我们再router里面引入nav.js

import Vue from 'vue'
import Router from 'vue-router'
import {nav} from './nav'

Vue.use(Router)

const globalRoutes = [
  {path: '/test', component: () => import('pages/Test.vue')}
]

const router = new Router({
  mode: 'hash',
  isAddDynamicMenuRoutes:false,
  scrollBehavior: () => ({y: 0}),
  routes: globalRoutes
})

router.beforeEach((to, from, next) => {
  if (!router.isAddDynamicMenuRoutes) {
    let list = [];
    nav.forEach(item => {

      let url = '/'+item.url.replace('/', '-').toLowerCase();
      let urlName = item.url + '.vue';

      list.push({label:item.label,url:url,icon:item.icon});

      mainRoutes.children.push(
        {path: url, component: () => import(`pages/${urlName}`)}
      )

    });
    router.addRoutes([
      mainRoutes,
    ])
    router.isAddDynamicMenuRoutes = true;

    sessionStorage.setItem('nav', JSON.stringify(list));

    next({ ...to, replace: true })

  }else {

    next()
  }
})


export default router

这样就实现了路由动态的效果了。是不是很简单呢。

最后我将目录结构截图出来大家看下。

72525d6b7031e677f8b95f73601b8e48.png
Logo

前往低代码交流专区

更多推荐