Vue Router（5）

Vue-Router

1. 什么是前端路由

• 网址：router.vuejs.org
• 后端渲染\后端路由
• 前后端分离
• SPA\前端路由

2. 路由的基本配置

1. 配置路由信息(index.js)

• 安装 vue-router

npm install vue-router

• vue.use => 创建对象 => 挂载到实例上

import VueRouter from "vue-router"
import Vue from "vue"
// 1. 通过vue.use(插件)，安装插件
Vue.use(VueRouter)
// 2. 创建对象
const router = new VueRouter({
    // 配置路由和组件之间的关系(默认为 hash 值,可通过mode 改成 history 模式)
    routes,
})
// 3. 挂载到实例上（配置每个映射关系）
// 引入两个组件(动态导入) <== 路由懒加载
const Home = () => import("../components/Home")
const User = () => import("../components/User")
const routes = [
    {
        // 默认路径
        path: "",
        redirect: "/home", // redirect 重定向
    },
    {
        path: "/home",
        component: Home,
    },
    {
        path: "/user/:id",
        component: User,
    },
]

• 配置映射关系
  1. 创建组件
  2. 配置映射关系
  3. 使用 router-link¹/router-view²

<template>
    <div id="app">
        <router-link to="/home" tag="button">
            首页
        </router-link>
        // replace 改变跳转方式，不能返回上一页
        <router-link v-bind:to="'/user/' + useId" replace>
            用户
        </router-link>
        <router-view></router-view>
    </div>
</template>

3. 细节处理

• 默认路由：redirect
• mode: “history”

  修改为 history 模式(网址中不存在 /# )

• router-link => tag/replace/active-class

  tag: 定义渲染后的标签
  replace: 改变跳转方式，不能访问上一页
  active-class: 改变活跃标签的类名

$router 和 $route 的比较
注意：所有的组件都继承着 Vue 的原型

• $router
  • router 是路由栈
• $route
  • route 是当前活跃节点

4. 动态路由

• /user/:id
• this.$route.params.id

5. 参数的传递

• params(数据少的情况)

  1. 配置路由格式: /router/:id
  2. 传递的方式: 在 path 后面跟上对应的值
  3. 传递后形成的路径: /router/123,/router/abc

// 配置路由
{ path: '/user/:id', component: User },
// 传递参数
<router-link v-bind:to="'/user/' + useId" replace>
    用户
</router-link>
// 组件中传入参数
<h2>{{$route.params.id}}</h2>

• query -> URL(大量数据)³

  1. URL:配置的方法: /router
  2. 传递的方式: 对象中使用 query 的 key 作为传递方式
  3. 传递后形成的路径: /router?id=123, /router?id=abc

// 传递参数
<router-link v-bind:to="{path: '/profile',query: {name:'why',age='18'}}">
    档案
</router-link>
// 组件中传入参数
<h2>{{$route.query.name}}</h2>

6. 路由嵌套

• children

7. 导航守卫

• 全局导航守卫

// 前置守卫(guard)
router.beforeEach((to, from, next) => {
    // 默认重定向
    document.title = to.matched[0].meta.title
    next()
})
// 后置钩子(hook)
router.afterEach((to, from) => {
    console.log("hook")
})

• 路由独享守卫
• 组件类守卫

8. keep-alive

1. 基本使用

beforeRouteLeave(to,from,next){
    this.path=this.$route.path
    next()
}

2. 两个属性
   1. include ==> 字符串或正则表达式，只有匹配的组件会被缓存
   2. exclude ==> 字符串或正则表达式，任何匹配的组件都不会被缓存

---

1. router-link 标签最终默认被渲染成 a 标签(tag 可以修改成其他标签) ↩︎

2. router-view 表示渲染的内容出现的位置 ↩︎

3. URL:
   协议：//主机端口/路径？查询
   scheme://host:port/path?query#fragment

   ↩︎