vue-router 的常见用法

最新推荐文章于 2025-10-09 22:13:48 发布

原创最新推荐文章于 2025-10-09 22:13:48 发布 · 596 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了vue-router的常见用法，包括路由重定向、嵌套路由（子路由链接和子路由占位符、children属性声明子路由规则）、动态路由匹配（概念、$route.params参数对象、props传参）以及声明式和编程式导航（$router.push、$router.replace、$router.go等API）。同时，还深入讲解了导航守卫，如全局前置守卫、next函数的调用方式，以及如何控制后台主页的访问权限。

部署运行你感兴趣的模型镜像

vue-router 的常见用法

1. 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

在这里插入图片描述

2. 嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

在这里插入图片描述

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

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

在这里插入图片描述

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

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

在这里插入图片描述

书写子路由的时候可以不用加“/”，这也是官网推荐的方式。

3. 动态路由匹配

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

在这里插入图片描述

3.1 动态路由的概念

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下

在这里插入图片描述

3.2 $route.params 参数对象

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值。

在这里插入图片描述

3.3 使用 props 接收路由参数

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

在这里插入图片描述

4. 声明式导航 & 编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：
⚫ 普通网页中点击 a 链接、vue 项目中点击都属于声明式导在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如：

⚫ 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

4.1 vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push(‘hash 地址’)

⚫ 跳转到指定 hash 地址，并增加一条历史记录
② this.$router.replace(‘hash 地址’)

⚫ 跳转到指定的 hash 地址，并替换掉当前的历史记录
③ this.$router.go(数值 n)

⚫ 实现导航历史前进、后退

<template>
  <div class="home-container">
    <h3>Home 组件</h3>

    <hr />

    <button @click="gotoLk">通过 push 跳转到“洛基”页面</button>
    <button @click="gotoLk2">通过 replace 跳转到“洛基”页面</button>
    <router-link to="/main">访问后台主页</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoLk() {
      // 通过编程式导航 API，导航跳转到指定的页面
      this.$router.push('/movie/1')
    },
    gotoLk2() {
      this.$router.replace('/movie/1')
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  min-height: 200px;
  background-color: pink;
  padding: 15px;
}
</style>

<template>
  <div class="movie-container">
    <!-- this.$route 是路由的“参数对象” -->
    <!-- this.$router 是路由的“导航对象” -->
    <h3>Movie 组件 --- {{ $route.params.mid }} --- {{ mid }}</h3>
    <button @click="showThis">打印 this</button>
    <button @click="goback">后退</button>
    <!-- 在行内使用编程式导航跳转的时候，this 必须要省略，否则会报错！ -->
    <button @click="$router.back()">back 后退</button>
    <button @click="$router.forward()">forward 前进</button>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  // 接收 props 数据
  props: ['mid'],
  methods: {
    showThis() {
      console.log(this)
    },
    goback() {
      // go(-1) 表示后退一层
      // 如果后退的层数超过上限，则原地不动
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.movie-container {
  min-height: 200px;
  background-color: lightsalmon;
  padding: 15px;
}
</style>