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

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

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 动态渲染组件。示例代码如下：

代码语言：javascript复制

<template>
  <div class="main">
    <nav>
      <a href="#/Home">首页</a> | <a href="#/Movie">电影</a> |
      <a href="#/About">关于</a>
    </nav>
    <section>
      <KeepAlive>
        <component :is="coms[comName]"></component>
      </KeepAlive>
    </section>
  </div>
</template>

<script lang="ts" setup>
import Home from "./views/Home.vue";
import Movie from "./views/Movie.vue";
import About from "./views/About.vue";
import { ref, KeepAlive, onMounted } from "vue";

let coms = {
  Home,
  Movie,
  About,
};

let comName = ref("Home");
//当页面挂载成功时的钩子
onMounted(() => {
  //当hash值变化时的事件
  window.addEventListener(
    "hashchange",
    (event) => {
      //#/Home,获取路径名称
      let comKey = location.hash.substring(2);
      //更换当前组件名称
      comName.value = comKey;
    },
    false
  );
});
</script>

<style>
.main a {
  color: #00f;
  text-decoration: none;
  font-size: 16px;
}
.main a:hover {
  color: orangered;
}
.main nav {
  border-bottom: 2px solid #999;
  height: 46px;
  line-height: 46px;
}
</style>

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

代码语言：javascript复制

    <nav>
      <a href="#/Home">首页</a> | 
      <a href="#/Movie">电影</a> |
      <a href="#/About">关于</a>
    </nav>

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

代码语言：javascript复制

//当页面挂载成功时的钩子
onMounted(() => {
  //当hash值变化时的事件
  window.addEventListener(
    "hashchange",
    (event) => {
      //#/Home,获取路径名称
      let comKey = location.hash.substring(2);
      //更换当前组件名称
      comName.value = comKey;
    },
    false
  );
});

二、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路由模块，并初始化如下的代码：

代码语言：javascript复制

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

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

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

//创建路由器
let router=createRouter({
    history:createWebHashHistory(),  //指定路由模式为hash模式（兼容性好，但带#）
    routes
});

//导出
export default router;

2.2.3 导入并挂载路由模块

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

代码语言：javascript复制

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'  //导入路由规则

let app=createApp(App);

//挂载路由中间件
app.use(router);

app.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> 声明路由链接和占位符：

代码语言：javascript复制

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

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

<style>
.main a {
  color: #00f;
  text-decoration: none;
  font-size: 16px;
}
.main a:hover {
  color: orangered;
}
.main nav {
  border-bottom: 2px solid #999;
  height: 46px;
  line-height: 46px;
}
section {
  min-height: 500px;
  margin: 0;
}
</style>

src/views/Home.vue

代码语言：javascript复制

<template>
  <div class="cls1">
    <h2>这是首页 - Home</h2>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
  background: #def;
  min-height: 500px;
}
.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>

src/views/Movie.vue

代码语言：javascript复制

<template>
  <div class="cls1">
    <h2>这是电影频道 - Movie</h2>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
  background: #dfe;
  min-height: 500px;
}
.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>

src/views/About.vue

代码语言：javascript复制

<template>
  <div class="cls1">
    <h2>这是关于我们 - About</h2>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
  background: #fde;
  min-height: 500px;
}
.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>

运行效果：

三、vue-router 的常见用法

3.1. 路由重定向

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

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

代码语言：javascript复制

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 的子路由链接以及子路由占位符。示例代码如下：

代码语言：javascript复制

<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 属性声明子路由规则：

代码语言：javascript复制

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 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

代码语言：javascript复制

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：

代码语言：javascript复制

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 可以在这里找到。

代码语言：javascript复制

<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 传参。示例代码如下：

代码语言：javascript复制

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

Movie.vue

代码语言：javascript复制

<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 ：

代码语言：javascript复制

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

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

代码语言：javascript复制

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

代码语言：javascript复制

<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 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式 :

代码语言：javascript复制

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

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

代码语言：javascript复制

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

代码语言：javascript复制

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文件，加上下面这一段：

代码语言：javascript复制

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

记得保存并重新运行项目

3.4、路由的匹配语法

3.4.1、在参数中自定义正则

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

TIP

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

代码语言：javascript复制

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

3.4.2、可选参数

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

代码语言：javascript复制

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(...)

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

代码语言：javascript复制

// 字符串路径
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 ：

代码语言：javascript复制

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

代码语言：javascript复制

<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

代码语言：javascript复制

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：

代码语言：javascript复制

<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 ：

代码语言：javascript复制

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

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

3.5.3、横跨历史

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

例子

代码语言：javascript复制

// 向前移动一条记录，与 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() ⚫ 在历史记录中，前进到下一个页面

代码语言：javascript复制

3.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

php vue.js javascript 网站

0 人点赞