vue-router 的版本

vue-router 目前只有 3.x 的版本和 4.x 的版本：

• vue-router 3.x 只能结合 vue2 进行使用
• vue-router 4.x 只能结合 vue3 进行使用

vue-router 4.x 基本使用

在项目中安装 vue-router

在 vue3 的项目中，只能使用 vue-router 4.x：

npm install vue-router@4 -S

定义路由组件

在项目 view 文件夹中自定义组件，将来要使用 vue-router 来控制它们的展示与切换

声明路由链接和占位符

使用 <router-link> 标签来声明路由链接，并使用 router-view 标签来声明路由占位符

<template>
    <h1>App 根组件</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/movie">电影</router-link>&nbsp;
    <router-link to="/about">关于</router-link>

    <!-- 声明路由占位符 -->
    <router-view></router-view>
</template>

创建路由模块

在项目中创建 router.js 路由模块，在其中按照以下 4 个步骤创建并得到路由的实例对象

1. 从 vue-router 中按需导入两个方法

// createRouter 方法用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式（hash 模式）
import { createRouter, createWebHashHistory } from 'vue-router'

2. 导入需要使用路由控制的组件

3. 创建路由实例对象

const router = createRouter({
    // 通过 history 属性指定路由的工作模式
    history: createWebHashHistory(),
    // 通过 routes 数组，指定路由规则
    routes: [
        // path 是 hash 地址，component 是要展示的组件
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About },
    ]
})

4. 向外共享路由实例对象

const router = createRouter({
    // 通过 history 属性指定路由的工作模式
    history: createWebHashHistory(),
    // 通过 routes 数组，指定路由规则
    routes: [
        // path 是 hash 地址，component 是要展示的组件
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About },
    ]
})

// 向外共享路由实例对象
export default router

5. 在 main.js 中导入并挂载路由模块

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

// 导入路由模块
import router from './router.js'
const app = createApp(App)

// 挂载路由模块
app.use(router)

app.mount('#app')

导入并挂载路由模块

路由高级用法

路由重定向

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        // 其中 path 表示要被重定向的 “原地址”，redirect 表示将要被重定向到的 “新地址”
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About }
    ]
})

路由高亮

使用默认的高亮 class 类

被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：

/* 在 index.css 全局样式表中，设置 router-link-active 的样式 */
.router-link-active {
    background-color: red;
    color: white;
    font-weight: bold;
}

自定义路由高亮的 clss 类

在 main.js 文件创建路由的实例对象时，可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：

const router = createRouter({
    history: createWebHashHistory(),
    // 指定被激活的路由链接，会应用到 router-active 这个类名，默认的 router-link-active 类名会被覆盖掉
    linkActiveClass: 'router-active',
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About }
    ]
})

嵌套路由

1. 声明子路由链接和子路由占位符

<template>
    <h3>MyAbout 组件</h3>
    <!-- 在关于页面中，声明两个子路由链接 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <!-- 在关于页面中，声明 tab1 和 tab2 的路由占位符 -->
    <router-view></router-view>
</template>

2. 在父路由规则中，通过 children 属性嵌套声明子路由规则

在 router.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则

const router = createRouter({
    history: createWebHashHistory(),
    linkActiveClass: 'router-active',
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        // about 页面的路由规则（父级路由规则）
        { path: '/about', component: About,
          // 通过 children 属性嵌套子路由规则
          children: [
              // 访问 /about/tab 时，展示 Tab 组件
              { path: 'tab1', component: Tab1 },
              { path: 'tab2', component: Tab2 }
         ] }
    ]
})

子路由规则的 path 不要以 / 开头

动态路由匹配

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号 (:) 来定义路由的参数项：

{ path: '/movie/:id', compomemt: Movie }

$route.params 参数对象

通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数项

$route.params.id

使用 props 接收路由参数

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参：

// 在定义路由规则时，声明 props: true 选项，
// 即可在 Movie 组件中，以 props 的形式接收到路由规则匹配到的参数项
{ path: '/movie/:id', component: Movie, prpos: true }

<template>
    <!-- 直接使用 props 中接收的路由参数 -->
    <h3>MyMovie 组件 --- {{ id }}</h3>
</template>

<script>
export default {
    // 使用 props 接收路由规则中匹配到的参数项
    props: ['id']
}
</script>

vue-router 编程式导航 API

this.$router.push('hash 地址')

this.$router.go(数值 n)

命名路由

通过 name 属性为路由规则定义名称的方式，叫做命名路由：

{
    path: '/movie/:id',
    // 使用 name 属性为当前的路由规则定义一个 “名称”
    name: 'mov',
    component: Movie,
    props: true
}

命名路由的 name 值不能重复，必须保证唯一性

使用命名路由实现声明式导航

为 <router-link> 标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用 params 属性指定跳转期间要携带的路由参数：

<router-link :to="{ name: 'mov', params: { id: 3 } }">go to Movie</router-link>

使用命名路由实现编程式导航

this.$router.push({ name: 'mov', params: { id: 3 } })

总结

在 vue 中配置路由

• createRouter、app.use(router)

使用用路由嵌套

• 通过 children 属性进行路由嵌套、子路由的 hash 地址不要以 / 开头

动态路由匹配

• 使用 冒号 声明参数项、this.$route.params、props: true

使用编程式导航

• this.$router.push、this.$router.go(-1)

使用全局导航守卫

• 路由实例.beforeEach((to, from, next) => { })