四、路由

路由（Vue router）目前必不可少的一个。所以也要借鉴下框架里router是怎么封装的。

正常步骤应该是1.安装router、2.main中引入router、3.单独配置router，不过因为框架里都有了，我就不重新卸载重新安装了，避免出现一些其他未知问题。

1.安装：

router官网介绍是

npm install vue-router

如果安装之后报错的话会有可能是因为版本不一致，所以需要指定低版本来安装。

2.配置router

在src目录下创建一个router文件夹，router文件夹下创建一个index.js文件。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const myRouter = [
  {
    path:"/",
    //重定向
    redirect:"/Home/HomePage"
  },
  {
    path:"/Home",
    name:"Home",
    component:() =>import('../views/Home.vue'),
    children:[
      {
          path:"/Home/HomePage",
          name:"HomePage",
          component:() =>import('../components/HomePage.vue'),
      }
    ]
  }
]

const routes = [
  ...myRouter
]
const router = new VueRouter({
    router
})

export default router

3、在main中把router文件夹里的index.js引入

import router from './router'


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

注： ...myRouter应该是展开运算符