vue的路由

一、vue的路由

1.1 路由是干什么的？
就是来负责跳转页面…，反正是和页面打交道的
1.2 vue + router创建的是单页面应用（SPA）
解释一下什么是单页面应用：只有一个html文件
目前来说：后台系统非常适合Vue这个框架来做

二、页面跳转

2.1 template
课程页

2.2 js
router.push ====> 从A进入到B，也可以从B返回到A
this.$router.push(‘/course’)

  router.replace ====> 从A进入到B，不可以再返回
  router.go ====> go(-1)、go(0),返回，前进，刷新
  router.back ====> 返回上一页

三、路由的模式

3.1 history 模式
const router = new VueRouter({
mode: ‘history’,
base: process.env.BASE_URL,
routes
})
3.2 hash模式
const router = new VueRouter({
mode: ‘hash’,
base: process.env.BASE_URL,
routes
})
3.3 两种路由模式的区别
（1）关于找不到路由的情况
history：会发送一次get请求
hash：不会发送额外的一次请求
（2）展示形式不一样

  ********目录结构 ******
  components ====》 组件
  router ====》路由配置文件
  assets ====》静态资源
  views ====> 页面

四、路由懒加载分包：webpackChunkName: “Course”

const routes = [
{
path: ‘/’,
name: ‘home’,
component: Home
},
{
path: ‘/course’,
name: ‘Course’,
component: () => import(/* webpackChunkName: “Course” / ‘…/views/Course.vue’)
},
{
path: ‘/vip’,
name: ‘Vip’,
component: () => import(/ webpackChunkName: “Vip” */ ‘…/views/Vip.vue’)
}
]

五、配置404页面

六、路由导航守卫

https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

路由独享导航守卫
{
path: ‘/course’,
name: ‘Course’,
beforeEnter(to, from, next) {
if(false){
next()
}else{
next(‘/login’)
}
},
component: () => import(/* webpackChunkName: “Course” */ ‘…/views/Course.vue’)
},