Vue 动态路由

Henry

2020-02-08

FrontEnd / Vue

字数统计:

552字

阅读时长≈

2分

现在很多人还是在默默的一个个功能页去配置管理路由, 目录管理 -> 导入.vue 文件 -> 路由配置 -> 页面上应用. 当应用越来越大, 这一套流程的管理会变得越来越繁杂和臃肿. 修改起来也特别麻烦.

假如某文件夹下的目录能自动生成对应路由那就方便多了. 即假如我在 page 文件下添加 a.vue 文件, 那么我就可以从 http://localhost:8080/#/page/a 中访问到该组件. 我不用再去 router.js 那里 import 组件并配置路由路径.

想要实现这个功能主要有两个知识点, 一个是动态路由, 一个是动态组件.

动态路由:

const router = new VueRouter({
  routes: [
    // 动态路径参数以冒号开头
    { path: '/page/:path', component: Home }
  ]
})

this.$route.params.path 可以获取到 path 参数

动态组件:

1	<component v-bind:is="name"></component>

:is 是动态组件的用法, 当 name 变化, 组件就会发生变化.

所以我们可以在动态组件中实时计算路由变化.

// 需要使用 vue-async-computed 插件
asyncComputed: {
  name() {
    // 获取 this.$route.params 中的参数
    const path = this.$route.params.path
    if (path) {
      // 根据 path 导入组件并 return
      // webpackChunkName 的作用是定义打包后的文件名称
      // [webpack中动态import()打包后的文件名称定义_逝水流光的博客-CSDN博客](https://blog.csdn.net/javao_0/article/details/85162458)
      return import(/* webpackChunkName: "[request]" */ `@page/${path}`)
        .then(res => {
          return res.default
        })
        .catch(err => {
          console.log('TCL: name -> err', err)
          this.$router.push('/404')
        })
    }
  }
}