路由:就是实现网站各个页面关系的基本组成,进行页面跳转时的导航
本质:一个路径(域名后边问号前边)+页面(组件)
位置: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所对应的标签内,想把页面展现在那个组件内就将该标签添加到对应的组件内
生命周期
底部