[JavaScript知识库]Vue全家桶vue-router实现页面间跳转

Vue路由

路由的主要作用 : 是可以实现单页面应用

路由的工作原理:监听网页哈数值的变化

单页面应用和多页面应用的区别

vue路由的使用流程

? 给vue添加路由有三种方式

以下两种实际开发推荐（自动配置一条龙服务）

? （1）vueui 创建脚手架的勾选 vue-router选项

? （2）在根目录执行: vue add router

? 这个命令可以让你原本没有配置路由的项目，一键配置。与vueui作用一致

（1）手动根据官方文档完整配置路由6个步骤

（2）能够使用模块化语法把路由封装到 ./router/index.js 文件中

手动配置路由的六个步骤

• 1.导入路由
• 2.配置路由规则
• 3.创建路由对象
• 4.将路由对象挂载到vue上
• 5.页面引入路由
• 6.设置路由出口

路由跳转传参

vue动态路由匹配(声明式导航)

作用:实现get方式传参 ----- 看起来是get传参,实际上是给组件传参
动态路由匹配传参分为三个流程:

• 1.定义路由规则

{
    path: '/friend',
    name: 'friend',
    component: friend
},
{
    path: '/friend/:name/:age',
    name: 'friend',
    component: friend
},

• 2.传递参数
  • 标准写法（query传参）： /path?参数名=值
  • 简洁写法（params传参）： /path/参数值1/参数值2
• 3.接受参数
  • 标准写法接受参数 : $route.query.参数名
  • 间接写法接受参数 : $route.params.参数名

vue路由的编程式导航

编程式导航通过js代码做路由跳转

语法:

• $router.push('路径') 通过路径传参(刷新页面还在)，写在query中
• $router.push({name:'组件name'}) 通过`params传参(内存传递，刷新页面就不在了)

二级路由

• 配置二级路由规则: 二级路由页面,一般会放在./views/子目录中
• 二级路由在一级路由中华添加children数组,跟route用法一样

路由导航守卫

• 1.什么是路由导航守卫？ ： 通俗来讲，就是路由跳转的时候需要执行的一个回调函数
  • 路由导航：就是路由跳转的意思
  • 守卫：类似于门卫，你做某件事之前会对你进行一个检查
• 2.为什么要有路由导航守卫
  • 在项目开发中，并不是每一个路由跳转都是明确的。 例如很多页面跳转需要登录判断，如果你有登录，则跳转到指定页面，没有登录则跳转到登录页面。
    • 举例子：我想进小区(个人信息)，门卫（导航守卫）会检查我有没有做核酸(是否登录)，如果做了就让我进去（跳转个人信息）。没做就让我去核酸点（登录页面）做完核算才可以进去。
• 3.路由导航守卫有哪些？
  • 前置守卫：跳转前执行
  • 后置勾子：跳转后执行

// 实例化路由对象
const router = new VueRouter({
  routes
})



// 注册导航守卫 (全局前置守卫  跳转之前执行)
router.beforeEach((to, from, next) => {
  // to:去哪里 路由信息
  console.log('to:', to)
  // from：从哪来 路由信息
  console.log('from:', from)
  // console.log('next:', next)
  /* 
  next() : 完成守卫(检查)，这个函数必须要调用
    next() : 不传参，让你正常跳转（就是跳转目标路由to）
    next({path:'路由路径'}) ： 进行拦截，不让你走（跳转到我指定路由）
  */
  next()
})

keep-alive组件缓存

• （1）路由切换时, 消失的页面, 会被销毁, 触发destroyed
• （2）再切换回来, 重新创建, 所有代码重新执行, 效率不

• include 包含哪些组件名需要缓存

  <keep-alive include="find,friend">
      <router-view></router-view>
  </keep-alive>

• exclude 不缓存哪些名字的组件

  <keep-alive exclude="my,login">
      <router-view></router-view>
  </keep-alive>