文章摘要： Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

路由机制

安装

npm install vue-router

流程

  1. 配置独立的路由文件
  • 创建路由
  • 配置路由规则
  • 注册路由子对象

  1. 导入路由到Vue中，并通过app挂载到DOM节点上

  2. 指定路由显示入口

  • <router-view>标签指定路由组件显示的位置
  • 使用<router-link>来代替<a>标签，实现页面更新/跳转

标签

  • <router-view>：页面添加位置
  • <router-link>：触发事件标签

路由概念和机制

路由配置

import {createRouter, createWebHistory} from 'vue-router';

// 创建路由，配置“页面”与“路由对象”的映射关系
const router = createRouter({
    // 配置路由规则
    history: createWebHistory(), // 设置前进后退的规则，使用浏览器常规的方式控制历史
    // 注册路由对象和路由规则
    routes: [
        {
            path: '/login',
            name: 'login',
            component: () => import ('../view/Login.vue'),
            meta: {'title': '注册界面'}
        },
        {
            path: '/logon',
            name: 'logon',
            component: () => import ('../view/Logon.vue'),
            meta: {'title': '登录界面'}
        }
    ]
});

export default router;

页面跳转

  • html中使用<router-link>进行跳转。
<router-link to="../view/Logon.vue">跳转按钮</router-link>

路由缓存

路由重定向

{
    path: '/',
    redirect: '/'
}

路由404

{
    path: '/:pathMatch(.*)',
    redirect: '/home'
}

子路由

{
    path: '/logon',
    name: 'logon',
    component: () => import ('../view/Logon.vue'),
    meta: {'title': '登录界面'},
    // 子路由/二级路由
    children: [
        path: '/logon/a1',
        name: 'a1',
        component: () => import ('../view/a1.vue'),
        meta: {'title': '登录界面a1'},
    ]
}

同组件多路由容器

html方面

  • 为标签添加name属性
<router-view name="topBox02"></router-view>

js方面

  • 使用components参数来配置。
import {createRouter, createWebHistory} from 'vue-router';

// 创建路由，配置“页面”与“路由对象”的映射关系
const router = createRouter({
    // 配置路由规则
    history: createWebHistory(), // 设置前进后退的规则，使用浏览器常规的方式控制历史
    // 注册路由对象和路由规则
    routes: [
        {
            path: '/login',
            name: 'login',
            components: {
                topBox02: () => import ('../view/Login.vue'),
            },
            meta: {'title': '注册界面'}
        },
        {
            path: '/logon',
            name: 'logon',
            components: {
                topBox02: () => import ('../view/Logon.vue'),
            },
            meta: {'title': '登录界面'}
        }
    ]
});

export default router;

路由占位参数（动态参数）

js方面

  • 设置props参数为true。
  • 这将解析url中带有:的参数。
{
    path: '/logon',
    name: 'logon',
    component: () => import ('../view/Logon.vue'),
    meta: {'title': '登录界面'},
    // 子路由/二级路由
    children: [
        path: '/logon/a1/:id',
        name: 'a1',
        component: () => import ('../view/a1.vue'),
        meta: {'title': '登录界面a1'},
        props: true
    ]
}

编程式路由

<script setup>
import {useRouter} from 'vue-router';

const router = useRouter();

function toUserData() {
    // 跳转页面
    router.push({name: 'userData'});  // 这里的`name`是路由配置中的`name`参数
}
</script>

<template>
    <button v-on:click="toUserData">执行跳转页面</button>
</template>

路由守卫

  • 路由守卫用于全局路由拦截逻辑处理，用户登录拦截、权限拦截等。

机制说明

  • 全局前置拦截：beforeEach((to, from, next) => {})，路由还未跳转。
  • 全局后置拦截：afterEach((to, from, next) => {})，路由已跳转。
  • 单个路由拦截：beforeEnter:(to, from, next) => {}，配置在路由对象。

参数介绍

  • to：表示当前去的路由对象。
  • from：表示当前所在页面对应的路由对象。
  • next({路由对象})：函数，表示跳转到指定参数路由、无参时表示放行。

案例

// 路由守卫
router.beforeEach((to, from, next) => {
    // 判断是否有`title`值，且`isPage`为true
    if (to.meta.title) {
        // 更新页面菜单栏标题
        document.title = to.meta.title;
    }

    // 放行
    next();
});
更新时间: