路由

路由

一种 映射关系

Vue 路由：路径和组件的映射关系

为什么用路由：

单页面应用SPA（Single Page Application）：所有的功能在一个html页面上实现

优点：只有一个 html ，不用刷新页面，用户体验好

高效

缺点：学习成本高

首次加载会比较慢一点，不利于SEO

路由 vue-router 本质是一个第三方包

使用：

① 装包

yarn add vue-router

② 引入

import VueRouter from "vue-router"

③ 注册

Vue.use(VueRouter)

④ 配置路由规则

let routes = [
   // 一个对象即是一条规则
   { }
]

配置对象的属性： path 路径

component 组件

name 路由名称，用于编程式导航跳转

⑤ 创建路由对象，传入配置规则

let router = new VueRouter({
   routes
})

⑥ 将路由对象挂到 Vue 配置中（挂载路由）

new Vue({
  router
})

⑦ 使用 router-view 组件占位，将来路径匹配后会将指定的组件替换到此处

2. Vue 路由 - 声明式导航

（1）跳转

可用组件 router-link 来替代 a 标签

router-link 实质上最终会渲染成 a 链接， to 属性等价于提供 href 属性

router-link 提供了声明式导航高亮的功能（自带类名）

① router-link-active 模糊匹配 url 后面的 hash

② router-link-exact-active 精确匹配 url 后面的 hash

用法：

（2）传参

向目标组件传递参数

在跳转路由时，可以给路由对应的组件内传值

用法：

① 在 router-link 上的 to 属性传值

/path?参数名=值

/path/值 -- 需要提前在路由对象配置 path：“/path/:参数名”

② 对应页面组件接收传递过来的值

$route.query.参数名

$route.params.参数名

3. Vue 路由 - 重定向

匹配 path 后，强制跳转 path 路径

网页打开 url 默认 hash 值是 /路径

用法： 在配置属性中加入 redirect："路径"

4. Vue 路由 - 404页面

找不到路径给个提示页面

用法： 配置对象的 path 设置为 *

5. Vue 路由 - 模式设置

修改路由在地址栏的模式

hash路径例如：http://localhost:8080/#/home

history路由例如：http://localhost:8080/home

用法：在创建 router 对象时传入 mode

① hash url后面有 #

② history 更美观，但需要后端配合

6. Vue 路由 - 编程式导航

可以在 js 中进行路由跳转

用法：

$router.push({
   path:"路径"，
   name:"路由名称"
})

（1）传参

用法：

$router.push({

     path:'路径'，

     name:'路由名称'，

     query：{}，

     params:{}

})

注意： 使用 path 会忽略 params

$router：用于路由跳转

$route：接收路由参数

7. Vue 路由 - 嵌套和守卫

（1）路由嵌套

在现有的以及路由下，在嵌套二级路由

子路由：

① children：[]

② 数组中的配置和 routes 一样

③ 子路由的 path 不能以 / 开头

注意： 二级路由 path 一般不写根路径 /

跳转时路径要从 / 开始写全

（2）全局前置守卫

作用：用于拦截路由跳转

路由跳转之前，会触发一个函数

用法：

① 在 main.js 中找到 router 对象调用 beforeEach ②

router.beforeEach((to,from,next) =>{})

参数一： to 到哪里去

参数二： from 从哪里来

参数三：next 函数，是否放行

注意： next 必须调用，否则路由系统就会瘫痪

8. Vue 路由 - 组将缓存

不会频繁的创建和销毁组件，页面更快呈现

作用：缓存，组件不会被销毁

用法： 在 router-view 外面包裹一个 keep-alive 组件

keep-alive 组件的 include属性 和 exclude属性

include（包含 -- 缓存）

exclude（不包含 -- 缓存）

当使用了 keep-alive 之后，组件会多两个钩子函数

activated 激活时触发

deactivated 失活时触发