返回

Vue Router 4 中 name 的作用、传参及动态路由详解

前端

导语：

在单页面应用中，路由管理至关重要。Vue Router 4 作为 Vue.js 官方提供的路由解决方案，提供了强大的功能，可以帮助我们轻松管理复杂的前端路由。本文将深入探讨 name 在 Vue Router 4 中的作用，并剖析 query 传参、params 传参和动态路由参数之间的区别，此外还将重点介绍命名视图、别名 alias、前置路由守卫和路由过渡效果等实用功能。

name 的作用

在 Vue Router 4 中，name 属性用于指定路由的唯一标识符。name 可以用来在路由之间进行导航，也可以用于创建嵌套路由。例如，我们可以使用以下代码创建一个名为 "home" 的路由：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

然后，我们可以使用 this.$router.push({ name: 'home' }) 导航到 "home" 路由。

query 传参

query 传参是附加在 URL 后面的数据，以问号 (?) 开头，参数之间用 & 分隔。例如，以下 URL 使用 query 传参传递了 "name" 和 "age" 参数：

http://example.com/?name=John&age=30

在 Vue Router 4 中，我们可以使用 this.$route.query 访问 query 参数。例如：

console.log(this.$route.query.name) // John
console.log(this.$route.query.age) // 30

params 传参

params 传参是路由路径中的一部分，用冒号 (:) 表示。例如，以下路由路径使用 params 传参来捕获 "id" 参数：

/user/:id

在 Vue Router 4 中，我们可以使用 this.$route.params 访问 params 参数。例如：

console.log(this.$route.params.id) // 123

动态路由参数

动态路由参数是结合了 params 传参和 query 传参的功能。它允许我们在路由路径中使用 params 传参，并在 query 字符串中传递额外的参数。例如，以下路由路径使用动态路由参数来捕获 "id" 和 "name" 参数：

/user/:id?name

在 Vue Router 4 中，我们可以使用 this.$route.params 和 this.$route.query 访问动态路由参数。例如：

console.log(this.$route.params.id) // 123
console.log(this.$route.query.name) // John

命名视图

命名视图允许我们在路由中定义多个视图。这对于创建布局复杂的应用程序非常有用。例如，我们可以使用以下代码创建一个具有 header、main 和 footer 三个视图的路由：

const routes = [
  {
    path: '/',
    name: 'home',
    components: {
      header: Header,
      main: Main,
      footer: Footer
    }
  }
]

然后，我们可以在模板中使用 <router-view> 组件来渲染这些视图。例如：

<template>
  <div>
    <router-view name="header"></router-view>
    <router-view name="main"></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

别名 alias

别名 alias 允许我们为路由创建一个更简洁的路径。例如，我们可以使用以下代码为 "home" 路由创建一个别名 "index"：

const routes = [
  {
    path: '/',
    name: 'home',
    alias: 'index'
  }
]

然后，我们可以使用 this.$router.push({ name: 'index' }) 导航到 "home" 路由。

前置路由守卫

前置路由守卫允许我们在进入路由之前执行一些操作。这对于进行身份验证、加载数据或重定向用户非常有用。例如，我们可以使用以下代码创建