Vue-cli自动配置路由(二级路由)

路由自动配置

在指定文件夹里创建文件，就可以制动配置路由

1. 在src下创建路由配置router文件夹
   • 在router文件夹下创建index.js文件
   • 在index.js文件下引入vue-router（代码如下）npm i vue-router
     src->router->index.js

     	/* 这是项目路由的配置文件 */
     	//1. 引入需要的模块
     	
     	import Vue from 'vue'
     	import VueRouter from 'vue-router'
     	
     	import Home from '../view/home'
     	
     	/* 在vue中插件的引入，要想和vue.js融合那我们必须使用vue.use(插件名称) */
     	
     	//2. 激活插件
     	Vue.use(VueRouter)
     	
     	// 3. 得到router对象
     	// const router = new VueRouter(optisons配置项)
     	
     	var r = require.context('../view', true, /.js/)
     	var arr = []
     	r.keys().forEach((key) => {
     	    arr = arr.concat(r(key).default)
     	  })
     	  console.log('arr',arr)
     	
     	
     	const router = new VueRouter({
     	    mode: 'history',
     	  // routes: []
     	  routes: [
     	    {
     	        path: '/',
     	        redirect: 'home'
     	    },
     	    //{}每一个对象就是一个路由配置
     	    {
     	      path: '/home', //路由路径
     	      component: Home //路由路径对应的组件
     	    },
     	    ...arr
     	   
     	  ]
     	})
     	console.log('router',router)
     	console.log('arr',arr)
     	
     	//4. 导出router模块
     	export default router
     

2. 在src下的main.js引入src->router->index.js这个文件（代码）
   src->main.js

   import Vue from "vue";
   import App from "./App.vue";
   import router from './router'//引入路由
   
   Vue.config.productionTip = false;
   
   new Vue({
     router, //注册路由可以全局使用
     render: h => h(App)
   }).$mount("#app");
   
   

3. 在src下创建view文件
   • view文件下是放各页面
   • 在view下创建router.js文件
   • 页面格式
     • 在view文件下创建一个首页文件（home）
       • 在home文件夹下创建index.js文件作为初始页面

       • 注：每个view文件下创建的文件夹下都要写一个index.js作为该页面的初始页

   • src->view->router.js(代码)

     //获取对应文件
     var r = require.context('../view', true, /.vue/);
     //设置一个空数组，后期数据分离好后直接放进数组然后添加进路由
     
     var arr = [];
     r.keys().forEach((key) => {
         //先将获取的每条数据进行分段
         var _keyarr = key.split('.');
         var _keyarrs = _keyarr[1].split('/');
         // _keyarr = _keyarr[1].split('/');
         // console.log('r.keys()',r.keys())
         // console.log('key',_keyarr[1].split('/.'))
         //['','model1','index','vue']
         //console.log(r(key).default.name) //model1
         if (key.indexOf('index') != -1) {
             //如果是这个模块的主页面文件，则设置值路由为/+模块名
             // console.log('key.indexOf("index")',key.indexOf('index'))
             // console.log('key',key)
             // console.log(' _keyarr', _keyarr)
             arr.push({
                 path:'/'+ _keyarrs[1],
                 //component直接设置为默认文件名字
                 component: r(key).default
             })
         } else {
             //如果不是主页面，就设置路由为模块名+/+组件名
             arr.push({
                 path:'/' + _keyarrs[1] + '/' + _keyarrs[2],
                 component: r(key).default
             })
         }
     })
     export default arr
     

4. 在src下创建layout文件夹下创建index.js文件（用来展示路由的）
   src->layout->index.js

   <template>
      <div>
           <router-view></router-view>
       </div>
   </template>
   

5. 在src下的App.vue中注册layout文件
6. 具体目录结构如下