配置路由
- 为避免 main.js 文件复杂，将路由配置提取到 router/index.js 中
- 先安装包 npm或者yarn都行
npm install vue-router
yarn add vue-router
- 在src目录下新建一个router文件夹，在文件夹里新建一个js文件
- 引入模块 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 配置路由
let router = new VueRouter({
routes:[
{
//访问路径
path:"/",
//为了避免打包构建时JS包过大，导致页面加载缓慢，将不路由对应的组件分割成不同的代码块
//然后路由访问时才加载对应组件，用户体验感更好
component: () => import(/* webpackChunkName: "group" */ "@/page/Home")
},{
path:"/Nav",
component: () => import(/* webpackChunkName: "group" */ '@/page/Nav')
}
]
})
// 导出router
export default router
- 最后需要在main.js里引入 router
import router from "@/router"
new Vue({
router,
render: h => h(App)
}).$mount('#app')
