您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

06路由的模块化_转

发布时间：2023-04-12 14:29:36编辑：雪饮阅读（）

所谓的路由模块化，只不过就是把路由相关的代码统一封装到一个js中并以export导出一个对象，然后在原来配置路由的地方import进来即可。
如在main.js同目录下建立的router.js
import Index from './components/Index.vue';
import News from './components/news.vue';
import News2 from './components/news2.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
import User from './components/user.vue';
import UserAdd from './components/userAdd.vue';
import UserList from './components/userList.vue';
import ElementUI_Practice from './components/ElementUI_Practice.vue';
import MintUI_Practice from './components/MintUI_Practice.vue';
import VueRouter from 'vue-router';
const routes=[
    {path:'/',component:Index,name:'index'},
 
    {path:'/news',component:News,name:'news'},
    {path:'/news2',component:News2,name:'news2'},
    {path:'/news/content1/:aid',component:Content1},
    {path:'/news/content2',component:Content2},
    {
      path:'/user',
      component:User,
      name:'user',
      children:[
        {path:'/user_add',component:UserAdd,name:'user_add'},
        {path:'/user_list',component:UserList,name:'user_list'},
      ]
    },
    {path:'MintUI_Practice',component:MintUI_Practice,name:'MintUI_Practice'},
    {path:'ElementUI_Practice',component:ElementUI_Practice,name:'ElementUI_Practice'},
    {path:'*',component:Index}
  ];
  const router=new VueRouter({
    routes,
    mode:'history'
  })
export default router;
然后main.js就可以精简后如
import Vue from 'vue'
import App from './App.vue'
 
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
import './assets/css/basic.scss';
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
 
import {Button,Select,Input,Rate} from 'element-ui';
Vue.use(Button);
Vue.use(Select);
Vue.use(Input);
Vue.use(Rate);



//导入router模块
import router from './router.js';
 
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})