VUE 路由的模块化

周大胖子

其实吧就是把vue-router 单独当做一个模块封装出来， 你还别说 ，我真的是 都快忘记 nodejs原生代码怎么写了---
好了，开始封装
src/router/router.js

1. import Vue from 'vue'
3. import VueRouter from 'vue-router'
5. Vue.use(VueRouter);
6. // 3.1
7. import Home from '../components/Home'
8. import News from '../components/News'
9. import Anli from '../components/Anli'
10. import Info from '../components/Info'
11. import One from '../components/One'
12. import Two from '../components/Two'
13. import Six from '../components/Six'
14. import Three from '../components/Three'
17. // 3.2
18. const routes = [
19.     { path: '/home', component: Home },
20.     { path: '/news', component: News },
21.     {
22.       path: '/anli', component: Anli, children: [   //利用 children 来规定子路由 注意 子路由无/
23.         { path: 'one', component: One }
24.         , { path: 'two', component: Two }
25.         , { path: 'six', name: 'lmsix', component: Six }  // 别名路由
26.         , { path: 'three', redirect: '/news' , component: Three} //重定向 定到新闻页
27.       ]
28.     },
29.     { path: '/info/:id/:name', component: Info }, //多传参
30.     { path: '*', component: Home }, //默认首页
31.   ]
32. const router = new VueRouter({
33.     routes // short for `routes: routes`
34.   })
36. export default router;

复制代码

写完之后 丢到 main.js 中

1. import Vue from 'vue'
2. import App from './App.vue'
5. // 单独配置路由模块后引入
6. import router from './router/router.js'
8. Vue.config.productionTip = false
10. new Vue({
11.   // 4
12.   router,
13.   render: h => h(App),
15. }).$mount('#app')

复制代码