Vue工程化项目02-路由

路由：就是实现网站各个页面关系的基本组成，进行页面跳转时的导航

本质:一个路径(域名后边问号前边)+页面(组件)

位置：src-->router-->index.js

该文件的默认内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入HomeView页面
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)
// 路由数组
const routes = [
  // 路由1，
  {
    path: '/',    //路径
    name: 'home',
    // 加载方式1：先导入再引用
    component: HomeView   //页面
  },
  // 路由2 
  {
    path: '/about',  
    name: 'about',
    // 加载方式2：路由懒加载，通过箭头函数
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

我们只需要关注 const routes = [    ] 里面的内容即可

其中一个大括号表示一条路由规则，大括号内部的path表示路径，component表示页面

页面加载的方式有两种

方式1：先导入再引用（初始的时候就加载出来，引用的时候拿来用，适合小项目）

当时2：通过懒加载的方式（什么时候用，什么时候加载，适合大项目）

<router-view></router-view>用于呈现访问路径对应的组件页面，该标签要添加到根目录#app所对应的标签内，想把页面展现在那个组件内就将该标签添加到对应的组件内

生命周期

底部