一、前端路由的概念与原理

1.1. 什么是路由

路由（英文：router）就是对应关系。

1.2. SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

1.3. 什么是前端路由

通俗易懂的概念：Hash 地址与组件之间的对应关系。

1.4. 前端路由的工作方式

① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

1.5. 实现简易的前端路由

步骤1：通过 <component> 标签，结合 comName 动态渲染组件。示例代码如下：

步骤2：在 App.vue 组件中，为 <a> 链接添加对应的 hash 值：

步骤3：在 created 生命周期函数中，监听浏览器地址栏中hash 地址的变化，动态切换要展示的组件的名称：

二、vue-router 的基本用法

2.1. 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

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

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

2.2. vue-router 安装和配置的步骤

① 安装 vue-router 包
② 创建路由模块与路由规则
③ 导入并挂载路由模块
④ 声明路由链接和占位符

2.2.1 在项目中安装 vue-router

在 vue3 的项目中，安装 vue-router 的命令如下：

2.2.2 创建路由模块与路由规则

在 src 源代码目录下，新建router/index.ts路由模块，并初始化如下的代码：

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

//路由记录
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie",
        component:Movie
    },
    {
        path:"/about",
        component:About
    },
];

//创建路由对象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

2.2.3 导入并挂载路由模块

在 src/main.ts 入口文件中，导入并挂载路由模块。示例代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let app=createApp(App)

app.use(router).mount('#app');

2.2.4 声明路由链接和占位符

`router-link`

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

`router-view`

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符：

<template>
  <router-link to="/">首页</router-link> |
  <router-link to="/movie">电影</router-link> |
  <router-link to="/about">关于</router-link>
  <router-view></router-view>
</template>

<script lang="ts" setup></script>

三、vue-router 的常见用法

3.1. 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

//路由记录
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie",
        component:Movie
    },
    {
        path:"/about",
        component:About
    },
    {
        path:"/film",
        redirect:"/movie"
    }
];

//创建路由对象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

3.2. 嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。嵌套路由也称之为子路由，就是在被切换的组件中又切换其他子组件

例如：在one界面中又有两个按钮，通过这两个按钮进一步切换one中的内容一般都是这种，子路由定义到一级路由里面

点击父级路由链接显示模板内容　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　① 模板内容中又有子级路由链接

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　② 点击子级路由链接显示子级模板内容

3.1 声明子路由链接和子路由占位符

在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：

<template lang="">
  <div class="about">
    <h2>这是About组件 - 关于</h2>
    <router-link to="/about/tab1">企业文化</router-link> |
    <router-link to="/about/tab2">企业介绍</router-link>
    <hr />
    <div class="viewBox">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.about {
  border: 1px solid #ccc;
  background: #def;
  padding: 10px;
  margin: 10px;
}
.viewBox {
  min-height: 200px;
  background: #dfe;
}
</style>

3.2 通过 children 属性声明子路由规则

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

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';

//路由记录
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie",
        component:Movie
    },
    {
        path:"/about",
        component:About,
        redirect:"/about/tab1",
        children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
    },
    {
        path:"/film",
        redirect:"/movie"
    }
];

//创建路由对象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

3.3. 带参数的动态路由匹配

3.3.1、获取路径参数param、query与hash

思考：有如下 3 个路由链接：

定义如下 3 个路由规则，是否可行?

缺点：路由规则的复用性差。

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

const User = {
  template: '<div>User</div>', } // 这些都会传递给 `createRouter` const routes = [ // 动态字段以冒号开始 { path: '/users/:id', component: User }, ]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>', }

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：

匹配模式	匹配路径	$route.params
/users/:username	/users/eduardo	`{ username: 'eduardo' }`
/users/:username/posts/:postId	/users/eduardo/posts/123	`{ username: 'eduardo', postId: '123' }`

除了 $route.params 之外，$route 对象还公开了其他有用的信息，如 $route.query（如果 URL 中存在参数）、$route.hash 等。你可以在 API 参考中查看完整的细节。

这个例子的 demo 可以在这里找到。

<template lang="">
  <div>
    <h2>这是Movie组件 - 电影</h2>
    <h3>当前id={{ $route.params.id }}</h3>
    <h3>当前query={{ $route.query }}</h3>
    <h3>当前hash={{ $route.hash }}</h3>
  </div>
</template>

3.3.2、使用 props 接收路由参数

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

    {
        name:"movie",
        path:"/movie/:id?",
        component:Movie,
        props:true
    },

Movie.vue

<template lang="">
  <div>
    <h2>这是Movie组件 - 电影</h2>
    <h3>当前id={{ $route.params.id }}</h3>
    <h3>当前query={{ $route.query }}</h3>
    <h3>当前hash={{ $route.hash }}</h3>
    <h3>当前id={{ id }} (props直接接收)</h3>
  </div>
</template>
<script>
export default {
  setup() {
    console.log("组件被创建");
  },
  created() {
    this.$watch(
      () => this.$route.params.id,
      (toParam, previousParam) => {
        console.log(toParam, previousParam);
      }
    );
  },
  props: ["id"],
};
</script>
<style lang=""></style>

3.3.3、响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

const User = {
  template: '...', created() { this.$watch( () => this.$route.params, (toParams, previousParams) => { // 对路由变化做出响应... } ) }, }

或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航：

const User = {
  template: '...', async beforeRouteUpdate(to, from) { // 对路由变化做出响应... this.userData = await fetchUser(to.params.id) }, }

<template lang="">
  <div>
    <h2>这是Movie组件 - 电影</h2>
    <h3>当前id={{ $route.params.id }}</h3>
    <h3>当前query={{ $route.query }}</h3>
    <h3>当前hash={{ $route.hash }}</h3>
  </div>
</template>
<script>
export default {
  setup() {
    console.log("组件被创建");
  },
  created() {
    this.$watch(
      () => this.$route.params.id,
      (toParam, previousParam) => {
        console.log(toParam, previousParam);
      }
    );
  },
};
</script>
<style lang=""></style>

3.3.4、捕获所有路由或 404 Not found 路由

常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入正则表达式 :

const routes = [
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下 { path: '/user-:afterUser(.*)', component: UserGeneric }, ]

在这个特定的场景中，我们在括号之间使用了自定义正则表达式，并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候，可以通过将 path 拆分成一个数组，直接导航到路由：

this.$router.push({ name: 'NotFound', // 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。 params: { pathMatch: this.$route.path.substring(1).split('/') }, // 保留现有的查询和 hash 值，如果有的话 query: this.$route.query, hash: this.$route.hash, })
router/index.ts

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';

const NotFound={
    template:'<div>没有找到你要访问的页面 404，目标位置：{{$route.params.path}}</div>'
}

//路由记录
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie/:id?",
        component:Movie
    },
    {
        path:"/about",
        component:About,
        redirect:"/about/tab1",
        children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
    },
    {
        path:"/film",
        redirect:"/movie"
    },
    {
        path:"/:path(.*)*",
        component:NotFound
    }
];

//创建路由对象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

直接定义组件默认是不允许的

开启运行时编译

配置vue.config.js文件，加上下面这一段：

module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,  // 加上这一段
  // lintOnSave: false,
})

记得保存并重新运行项目

3.4、路由的匹配语法

3.4.1、在参数中自定义正则

当定义像 :userId 这样的参数时，我们内部使用以下的正则 ([^/]+) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用，除非你需要根据参数的内容来区分两个路由。想象一下，两个路由 /:orderId 和 /:productName，两者会匹配完全相同的 URL，所以我们需要一种方法来区分它们。最简单的方法就是在路径中添加一个静态部分来区分它们：

const routes = [
  // 匹配 /o/3549
  { path: '/o/:orderId' }, // 匹配 /p/books { path: '/p/:productName' }, ]

但在某些情况下，我们并不想添加静态的 /o /p 部分。由于，orderId 总是一个数字，而 productName 可以是任何东西，所以我们可以在括号中为参数指定一个自定义的正则：

const routes = [
  // /:orderId -> 仅匹配数字
  { path: '/:orderId(\\d+)' }, // /:productName -> 匹配其他任何内容 { path: '/:productName' }, ]

现在，转到 /25 将匹配 /:orderId，其他情况将会匹配 /:productName。routes 数组的顺序并不重要!

TIP

确保转义反斜杠( \ )，就像我们对 \d (变成\\d)所做的那样，在 JavaScript 中实际传递字符串中的反斜杠字符。

    {
        path:"/:id(\\d{3})?",
        component:Movie
    },

3.4.2、可选参数

你也可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选：

const routes = [
  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' }, // 匹配 /users 和 /users/42 { path: '/users/:userId(\\d+)?' }, ]

请注意，* 在技术上也标志着一个参数是可选的，但 ? 参数不能重复。

3.5、声明式导航 & 编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

3.5.1、导航到不同的位置

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由，并加上参数，让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数，结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash，结果是 /about#team router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path ：

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo // 同样 router.push({ path: `/user/${username}` }) // -> /user/eduardo // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益 router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user

当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如 undefined、false 等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）来跳过它。

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。

App.vue

<template>
  <div class="main">
    <router-link to="/">首页</router-link> |
    <router-link to="/movie">电影</router-link> |
    <router-link to="/about">关于</router-link> |
    <router-link to="/film">影视</router-link>
    <router-view></router-view>
  </div>

  <button @click="navClick">编程式导航</button>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

function navClick() {
  // 字符串路径
  //router.push("/movie/100");

  // 带有路径的对象
  //router.push({ path: "/movie/200" });

  // 命名的路由，并加上参数，让路由建立 url
  //router.push({ name: "user", params: { username: "eduardo" } });

  // 带查询参数，结果是 /movie?plan=private
  //router.push({ path: "/movie", query: { plan: "private" } });

  // 带 hash，结果是 /about#team
  router.push({ path: "/about", hash: "#team" });
}
</script>

<style scoped>
.main {
  width: 400px;
  border: 2px solid #999;
  border-radius: 10px;
  padding: 20px;
}
</style>

router/index.ts

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';

const NotFound={
    template:'<div>没有找到你要访问的页面 404，目标位置：{{$route.params.path}}</div>'
}

//路由记录
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/:id(\\d{3})?",
        component:Movie
    },
    {
        name:"movie",
        path:"/movie/:id?",
        component:Movie
    },
    {
        path:"/about",
        component:About,
        redirect:"/about/tab1",
        children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
    },
    {
        path:"/film",
        redirect:"/movie"
    },
    {
        path:"/:path(.*)*",
        component:NotFound
    }
];

//创建路由对象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

目标路由组件 target.vue：

<script setup lang="ts"> //setup写在script标签里，是setup(){}的语法糖
import {useRoute} from 'vue-router'
const route = useRoute()
console.log("name:"+route.query.name)//接收参数
</script>

3.5.2、替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true }) // 相当于 router.replace({ path: '/home' })

push 和 replace 的区别：
⚫ push 会增加一条历史记录
⚫ replace 不会增加历史记录，而是替换掉当前的历史记录

3.5.3、横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。

例子

// 向前移动一条记录，与 router.forward() 相同
router.go(1) // 返回一条记录，与 router.back() 相同 router.go(-1) // 前进 3 条记录 router.go(3) // 如果没有那么多记录，静默失败 router.go(-100) router.go(100)

$router.go 的简化用法
在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：
① $router.back()
⚫ 在历史记录中，后退到上一个页面

② $router.forward()
⚫ 在历史记录中，前进到下一个页面

6. 导航守卫
导航守卫可以控制路由的访问权限。示意图如下：

6.1 全局前置守卫
每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

6.2 守卫方法的 3 个形参
全局前置守卫的回调函数中接收 3 个形参，格式为：

6.3 next 函数的 3 种调用方式
参考示意图，分析 next 函数的 3 种调用方式最终导致的结果：
当前用户拥有后台主页的访问权限，直接放行：next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(‘/login’)
当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

6.4 控制后台主页的访问权限

总结
① 能够知道如何在 vue 中配置路由
⚫ createRouter、app.use(router)

② 能够知道如何使用嵌套路由
⚫ 通过 children 属性进行路由嵌套

③ 能够知道如何实现动态路由匹配
⚫ 使用冒号声明参数项、this.$route.params、props: true

④ 能够知道如何使用编程式导航
⚫ this.$router.push、this.$router.go

⑤ 能够知道如何使用导航守卫
⚫ 路由实例.beforeEach((to, from, next) => { /* 必须调 next 函数 */ })
————————————————
版权声明：本文为CSDN博主「薄荷糖C」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/HXBest/article/details/122657154

原文地址：http://www.cnblogs.com/best/p/16870187.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

Vue3学习笔记（五）——路由，Router