zoukankan      html  css  js  c++  java
  • vue-router-auto动态生成路由插件

    动态生成路由插件

    1.介绍:该插件可以通过文件名,或者.vue文件的前缀来动态的生成路由,无需自己配置,和nuxt.js相同,具体用法可以参照nuxt.js路由使用

    // 安装vue-router-auto
    
    npm i vue-router-auto -s
    
    
    // 文档地址
    
    https://www.npmjs.com/package/vue-router-auto
    
    
    // router/index.js
    
    import Vue from 'vue'
    
    import VueRouter from 'vue-router'
    
    // 引入使用
    import autoRouter from 'vue-router-auto'
    
    Vue.use(VueRouter)
    
    // 自动生成路由数据
    const routes = autoRouter({
      
      /*
    
        第一个参数是动态生成哪个目录下的文件的路由
    
        第二个参数是否深度遍历
    
        需要匹配的文件夹
    
      */
      rc: require.context('@/views', true, /.vue$/),
    
      // 重定向到哪个路由  
      redirect: '/hook'
    
    })
    
    const router = new VueRouter({
      routes
    })
    
    export default router

    2.创建组件

    // 在views目录下新建Login目录,下新建index.vue,对应的路由就是login
    
    
    // 在views目录下新建home.vue,那么对应的路由就是home
    
    
    // 动态路由也就是带参数的路由,新建文件夹或者.vue文件的时候都要带上_前缀
    
    // _id.vue 对应router的路由就是 { path: /:id }
    
    // _id目录新建index.vue 对应router路由 { path: /:id }
    
    // 更多用法请参照nuxt.js,或者文档
  • 相关阅读:
    1. C/C++项目一
    3. C/C++笔试面试经典题目三
    1. C/C++笔试面试经典题目一
    Win7下C/C++跨平台开发工具IDE的安装之Eclipse-CDT
    Win7下C/C++跨平台开发工具IDE的安装之CodeBlocks
    css
    form表单,选择器
    html介绍
    元类
    事务、视图、触发器、存储过程、函数、数据库的备份
  • 原文地址:https://www.cnblogs.com/zxuedong/p/12810589.html
Copyright © 2011-2022 走看看