vue 动态路由_vue动态路由

什么叫动态路由呢？顾名思义就是程序员眼中的硬编码与非硬编码的区别。还是拿之前的静态路由来做对比import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.v...

weixin_39575737

262人浏览 · 2020-11-25 05:30:26

weixin_39575737 · 2020-11-25 05:30:26 发布

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

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

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^