一、路由简介

前端路由 ：
- 路径和组件的 映射关系（一一对应）；
SPA ：
- 单页面应用程序；
- 基于前端路由技术；
- 优点：
  - 局部刷新，用户体验更好；
  - 数据传递容易，开发效率高；
- 缺点：
  - 开发成本高；
  - 首次加载会比较慢，不利于SEO优化；

二、vue-router 使用步骤

以下步骤是基于 默认模式 创建Vue2项目的；

下包：
- yarn add vue-router@3.5.3
- 下载太高版本的VueRoute会报错的；
main.js 导包 ：
- import VueRouter from 'vue-router
注册：
- 使用 Vue.use(VueRouter) 进行注册；
- 一旦注册了路由插件，会给Vue提供两个全局组件和两个全局对象；
- 全局组件：RouterLink 和 RouterView；
- 全局对象：$router 和 $route；
创建路由规则数组 ：
- 属性名是固定的；
- 配置 path 和 component 的关系；
- Vue中路由指的是：
  - 路径（path）和组件（component）的映射关系（不同的路径对应不同的组件）;
创建路由实例 ：
- new VueRouter();
注入：
- 在 new Vue() 里面注入；
给出口
- 在合适的页面中增加给路由出口<router-view />（单双标签都可）；

路由的运作原理 ：
- 当浏览器url地址发生改变的时候，在 router 数组中从上往下查找对应的path，如果命中（全等）了，则用 path 对应的 component 替换掉 <router-view /> 的位置。

示例展示：

js 复制代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1.下载包：yarn add vue-router -S

// 2.导入vue-router包
import VueRouter from 'vue-router'

// 3.注册
// vue.use(插入对象)：给Vue增强能力
// 一旦注册了路由了插件，会给Vue提供两个全局组件和两个全局对象
// 全局组件：RouterLink 和 RouterView
// 全局对象：$route 和 $router
Vue.use(VueRouter)

// 4.创建路由规则数组
// 配置path和component的对应关系
// Vue中路由是指：
// 路径（path）和组件（component）的映射关系（不同路径对应不同的组件）
// 导入三个页面组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
import NotFind from './views/NotFind.vue'
const routes = [
  {
    path: '/',
    // 重定向
    redirect: '/find'
  },
  {
    // 属性名是固定写法
    path: '/find',    // /标识根路径，不能丢
    component: Find   // 页面组件
  },
  {
    path: '/my',
    component: My
  },
  {
    path: '/friend',
    component: Friend
  },
  {
    path: '*',
    // component: NotFind,
    // 路由懒加载
    component: () => import('./views/NotFind.vue')
  }
]

// 5.创建路由实例
const router = new VueRouter({
  // 属性名固定：routes
  routes,
  // 自配置激活类名
  linkActiveClass: 'on-active',
  linkExactActiveClass: 'off-active'
})

new Vue({
  // 6.注入
  // 属性名固定：router
  router,
  render: h => h(App),
}).$mount('#app')

// 7.给出口 回到App.vue中 给一级路由添加出口
// <router-view></router-view>（标签名也可以写成大驼峰命名法）

三、声明式导航 - RouterLink

router-link ：
- VueRouter 在 全局注册 的组件，本质就是 a标签；

3.1 ❗ RouterLink 怎么使用？

当标签使用：

语法：

html 复制代码

<router-link to="路由规则数组中component对应的path属性值"> 给用户展示的内容 </router-link>

❗ 注意：
- 必须传入 to属性 ，属性值 必须和 路由规则数组 的 path属性值 一致；

3.2 RouterLink 的好处？

自带激活时的类名 ，可以做高亮效果；
配置激活类型 （类名自定义）：

四、重定向和路由模式

4.1 Vue路由重定向

匹配 path 后，强制跳转 path路径；
如何检测默认路由？
- 规则里定义 path: '/'；
如何重定向路由路径？
- redirect 配置项，属性值 为要 强制切换的路由路径 ；
- 说明：
  - 当检测到浏览器的url地址是/的时候，就跳转到 Find 组件；

4.2 Vue路由配置404页面

放在 路由规则数组 最后面 ，path 从上往下 匹配，如果前面没有匹配上的 path 就命中最后这个 * （任意路径都能访问该路径对应的组件）；
配置步骤 ：
1. 先准备一个 404 组件；
2. 在 路由规则数组 的 最后面 添加一个配置项；
3. path 为 *（如果把该配置项放在前面，那显示的页面全部都是404了😂）；

4.3 路由模式

路由有两种模式 ：
- hash ：
  - 表现为 url 上有 # 号；
- history ：
  - 表现为 url 上没有 # 号；
切换路由模式 ：
- 在 创建路由实例 的 配置项 中，有 mode属性 ，可以配置路由模式，属性值就是 hash 和 history；
示例展示：

五、声明式导航传参

在跳转路由时，可以给对应的组件内传值；
声明式导航 - router-link;

5.1 查询字符串传参（参数出现在浏览器url地址上）

❗ 注意：
- 查询字符串 ，接值的时候，看 query；

5.1.1 字符串拼接传参

跳转的时候传值 ：
- 在 <router-link>标签 的 to属性 上进行拼接；
- 语法：
  js 复制代码
```
<router-link to="/path?参数名1=值1&参数名2=值2&......">
    xxx
</router-link>
```
在对应的组件接收值 ：
- 在标签中写不需要this，在js中书写还是需要的；
- this.$route.query；

5.1.2 配置对象传参

传参语法 ：

html 复制代码

<router-link :to="{
              path: '和规则数组的path属性一样',
              query: {
                  属性名: 属性值,
                  // 键值对形式
              }
          }">
      给用户展示的内容
</router-link>

接值语法 ：

5.2 动态路由传参

❗ 动态路由传参 ，接收值 的时候，看 params；
先占位 （改造规则数组 ），再传值 （有几个占位的参数名，就产几个参数值），最后接值 （$route.params.参数名）；
步骤：
1. 需要先对规则数组对应的path 进行改造 ：
2. 传参：
  - to 属性值 为 字符串 ：
    js 复制代码
```
<router-link
    to="/path/参数1的值/参数的值/......"
>
    // 要展示的内容
</router-link>
```
    - 示例展示：
  - to 属性值 为 配置对象 ：
    - 示例展示：
3. 接值：
  js 复制代码
```
// 标签中
$route.params.参数名

// js中
this.$route.params.参数名
```
  - 示例展示：
❗ 注意：
- 动态路由 不能通过 path + params 配合，因为path会忽略params;
  - 这里的path指的是，RouterLink的to属性的属性值中不能出现path；
- 正确方式：name(需要给对应的路由取名，也叫命名路由) + params；
- 虽然写的是对象，但是最终会转为字符串；

六、编程式导航

$route 和 $router 区别：
- $route ：
  - 获取路由参数 ，表示 当前激活的路由对象；
- $router ：
  - 实现路由跳转 ，$router.push()实现跳转；

挂载后（使用mounted钩子函数），延迟n秒，自动跳转到指定页面（主要是路由跳转和传参的语法展示）：

js 复制代码

mounted() {
    setTimeout(() => {
        // 1.push(字符串)
        this.$router.push('/path')
        
        // 2.push(对象)
        this.$router.push({
            path: '/path'
        })
        
        // 3.查询字符串参
        // 字符串
        this.$router.push('/path?属性名1=属性值1&属性名2=属性值2&......')
        // 对象
        this.$router.push({
            path: '/path',
                query: {
                属性名1: 属性值1,
                属性名2: 属性值2,
                ......
            }
        })
        
        // 4.传动态路由参
        // 改造规则数组
        {
            path: '/path/:属性名1/:属性名2......',
        }
        // 字符串
        this.$router.push('/path/属性值1/属性值2......')
        // 对象
        // 改造规则数组
        {
            path: '/path/:属性名1/:属性名2......',
            name: '对应component'
        }
        this.$router.push({
            name: '规则数组name属性值',
            params: {
                属性名1: 属性值1,
                属性名2: 属性值2,
                ......
            }
        })
    }, n);
}

示例展示：

七、路由嵌套

二级路由如何配置：
- 创建需要的二级路由组件；
- 在路由规则数组里面对应的对象里面新增 children 属性（属性值 = 数组对象 ），在里面配置二级路由规则对象（path + component）；
- 对应第一季页面设置给出口，显示二级路由页面；
二级路由主要注意什么？
- 二级路由 path 一般 不写根路径 （/）；
示例展示：
- 在views里创建对应二级页面组件并导入到main.js中；
- 在对应的规则数组里面，新增children属性，在里面配置二级路由规则对象；
- 在对应一级组件里面设置出口以及router-link的to属性；

八、导航守卫

只有常用的：
- 全局前置守卫：
  - 任何一个路由在跳转之前都必须经过这个函数；
- 全局后置守卫；
还有一些别的守卫，可以移步Vue Router官网：
- 全局解析守卫；
- 路由独享守卫；
- 组件内的守卫：

js 复制代码

import Vue from 'vue'
// import Router from 'vue-router'
import VueRouter from 'vue-router'

// 路由规则数组
const routes = []

/**
* 导入 vue-router 的时候，起的变量名是啥，就是new 啥
* const router = new Router({})
**/

const router = new VueRouter({
    // 最基本的有个routes
    // 属性名和属性值一样，可以简写
    routes
})

// 路由全局前置守卫
router.beforeEach((to, from, next) => {
    /**
     * to = 到哪里去
     * from = 从哪里来
     * next = 是前置守卫必须执行的钩子，next必须执行，如果不执行，页面就死了
     * next() - 通过，放行
     * next(false) - 跳转终止
     * next(地址) - 跳转到某个页面
     */
     
    // 相关逻辑
})

// 路由全局后置守卫
router.afterEach()

今后在项目中判断token（令牌）是否为空字符串，可知道用户是否登录；
示例展示：
- next函数传值：
  - false，停留在原地；
  - 不传之表示正常放行

九、路由元信息

通过 meta 字段可以给路由添加更多信息；
取值：
js 复制代码
```
this.$route.meta.参数名
```

Vue2全家桶 - VueRouter - 【1】路由基础【简介、使用步骤、声明式导航、重定向、路由模式、编程式导航、路由嵌套、导航守卫、路由元信息】

一、路由简介

二、vue-router 使用步骤

三、声明式导航 - RouterLink

3.1 ❗ RouterLink 怎么使用？

3.2 RouterLink 的 好处？

四、重定向和路由模式

4.1 Vue路由重定向

4.2 Vue路由配置404页面

4.3 路由模式

五、声明式导航传参

5.1 查询字符串传参（参数出现在浏览器url地址上）

5.1.1 字符串拼接传参

5.1.2 配置对象传参

5.2 动态路由传参

六、编程式导航

七、路由嵌套

八、导航守卫

九、路由元信息

3.2 RouterLink 的好处？