标签：vue import Vue3 router path Router route 路由

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

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

标签：vue,import,Vue3,router,path,Router,route,路由
From： https://www.cnblogs.com/best/p/16870187.html

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