在Vue项目中使用vue-router

在src下新建文件夹：router

 router.js：

import App from '../App'
import Home from '../page/home/Home.vue'
import Login from '../page/login/Login.vue'

export default [
  {
    path: '/',
    component: App, // 顶层路由，对应index.html
    children: [
      //二级路由，对应App.vue
      // 地址为空时跳转至home页面
      {
        path: '',
        redirect: '/home',
      },
      {
        path: '/home',
        component: Home,
      },
      // 登录注册页面
      {
        path: '/login',
        component: Login,
      },
    ],
  },
]

main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueRouter)
const router = new VueRouter({
  routes,
  mode: 'hash',
  strict: process.env.NODE_ENV !== 'production',
})

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')