文章目录
文章目录
前言
本篇笔记，主要记录vue项目中路由器的工作模式、命名路由、嵌套路由、路由传参、编程式路由和路由重定向等的相关内容。
一、路由器工作模式
定义：在 Vue Router 中，有两种主要的工作模式：hash 模式和 history 模式。这两种模式决定了 URL 的表现形式以及浏览器如何处理导航。
1、hash模式
特点：
1、使用 URL 的哈希部分（即 # 后面的部分）来模拟一个完整的 URL。
2、不需要服务器端的支持，因为哈希部分不会发送到服务器。
3、浏览器地址栏的变化不会导致页面重新加载。
使用场景
1、hash模式的路由不需要服务器（后端）的支持。
2、适用于简单的单页面应用（SPA）。
示例
// src/router/index.ts
// 引入createWebHashHistory
import {
createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
const router = createRouter({
// 配置路由器使用 Hash模式
history: createWebHashHistory(),
routes
});
export default router;
2、history 模式
特点
1、使用 HTML5 的 History API 来实现真正的 URL 路径变化。
2、需要服务器端的支持，以确保在直接访问某个路由时能够正确返回应用的入口文件。
3、更符合传统的 URL 形式，没有 # 符号。
使用场景
1、当你需要更友好的 URL 形式时，推荐使用 history 模式。
2、适用于复杂的单页面应用（SPA）。
示例
// src/router/index.js
// 导入createWebHistory
import {
createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
const router = createRouter({
// 配置路由器使用 History模式
history: createWebHistory(),
routes
});
export default router;
二、to的两种写法及命名路由
在 Vue Router 中，路由链接 () 的 to 属性可以有两种写法：字符串形式和对象形式。
1、to的写法1：字符串形式
字符串形式的特点是：直接使用字符串来指定目标路径，简洁明了，适合简单的路由链接。
示例：
<template>
<div>
<!-- <RouterLink to="/">Home</RouterLink>| -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</template>
<script setup>
import {
RouterLink } from 'vue-router'
</script>
2、to的写法2：对象形式
对象形式的特点是：使用对象来指定目标路径及其相关参数，适合复杂的路由链接，特别是需要传递参数或查询字符串的情况。
示例
<template>
<div>
<router-link :to="{ name: 'Home' }">Home</router-link> |
<router-link :to="{ name: 'About' }">About</router-link>
</div>
</template>
3、命名路由
定义：在 Vue Router 中，命名路由（Named Routes）是一种通过给路由起名字来引用它们的方法。使用命名路由可以使你的代码更具可读性和可维护性，特别是在需要动态生成链接或编程式导航时非常有用。
// src/router/index.js
import {
createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
<!-- src/App.vue -->
<template>
<div>
<nav>
<router-link :to="{ name: 'Home' }">Home</router-link> |
<router-link :to="{ name: 'About' }">About</router-link> |
</nav>
</div>
</template>
<script>
</script>
三、嵌套路由
嵌套路由（Nested Routes）是 Vue Router 中一个非常强大的功能，它允许你在父路由组件内部嵌套子路由组件。这样可以创建复杂的多级导航结构，例如带有侧边栏的仪表板、多步骤表单等。
示例
假设你有一个简单的应用，包含一个主页和一个带有子路由的用户资料页面。用户资料页面有两个子页面：个人资料和设置。
- 创建路由配置
// src/router/index.js
import {
createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import UserProfile from '../views/UserProfile.vue';
import ProfileDetails from '../components/ProfileDetails.vue';
import Settings from '../components/Settings.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/user/:id',
name: 'UserProfile',
component: UserProfile,
// 定义子路由
children: [
{
path: 'profile',
name: 'ProfileDetails',
component: