在Vue项目中使用vue-router
在src下新建文件夹:router
router.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import App from '../App' 2 import Home from '../page/home/Home.vue' 3 import Login from '../page/login/Login.vue' 4 5 export default [ 6 { 7 path: '/', 8 component: App, // 顶层路由,对应index.html 9 children: [ 10 //二级路由,对应App.vue 11 // 地址为空时跳转至home页面 12 { 13 path: '', 14 redirect: '/home', 15 }, 16 { 17 path: '/home', 18 component: Home, 19 }, 20 // 登录注册页面 21 { 22 path: '/login', 23 component: Login, 24 }, 25 ], 26 }, 27 ]
main.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 import routes from './router/router' 4 import store from './store/' 5 import App from './App.vue' 6 7 Vue.config.productionTip = false 8 9 Vue.use(VueRouter) 10 const router = new VueRouter({ 11 routes, 12 mode: 'hash', 13 strict: process.env.NODE_ENV !== 'production', 14 }) 15 16 new Vue({ 17 router, 18 store, 19 render: (h) => h(App), 20 }).$mount('#app')
记录自己的采坑之路,需要时方便查找