在Vue项目中使用vue-router

在src下新建文件夹：router

router.js：

 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 ]

View Code

main.js：

 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')

View Code