Vue3路由跳转用法介绍

引言

Vue是一种流行的JavaScript框架，被广泛用于构建大型的、交互性强的Web应用程序。其最新版本Vue3带来了很多新的特性和改进，其中包括了对路由功能的重大改进。Vue3的路由机制更加灵活和易用，提供了一种直观且功能强大的方式来实现页面之间的切换和导航。本文将详细介绍Vue3中路由跳转的用法。

1. 安装和配置Vue Router

要使用Vue3的路由功能，首先需要安装和配置Vue Router。可以通过以下命令使用npm或yarn进行安装：

npm install vue-router@next
# 或
yarn add vue-router@next

安装完成后，在Vue的入口文件（通常是main.js或main.ts）中导入并使用Vue Router：

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 路由配置
  ]
})

createApp(App).use(router).mount('#app')

在上面的代码中，我们首先导入了createRouter和createWebHashHistory函数，然后使用这两个函数创建了路由实例router，并将其作为参数传递给createApp函数的use方法，最后将根组件App挂载到应用的根元素上。

2. 配置路由

在上一步的代码中，我们创建了一个空的路由实例，并通过参数routes配置了路由规则。每个路由规则都是一个对象，包含了路径和对应的组件。

下面是一个简单的示例，包含了两个路由规则：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

这段代码中，我们定义了两个路由规则，分别对应路径/和/about，并使用component属性指定了对应的组件。

3. 路由跳转

Vue Router提供了多种方式来实现路由跳转。下面介绍一些常用的方法。

3.1 使用`<router-link>`组件

<router-link>组件是Vue Router提供的一个内置组件，用于生成带有链接的导航。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

在上面的代码中，我们使用了两个<router-link>组件，分别指向了/和/about路径。点击链接时，会自动触发路由切换。

3.2 使用`$router.push()`方法

除了使用<router-link>组件，还可以在代码中使用$router.push()方法来进行路由跳转。

export default {
  methods: {
    goToHome() {
      this. $router.push('/') }, goToAbout() { this.$ router.push('/about')
    }
  }
}

在上面的代码中，我们定义了两个方法goToHome和goToAbout，分别调用了$router.push()方法实现路由跳转。

3.3 带参数的路由跳转

有时候需要在路由跳转时传递一些参数，Vue Router提供了多种方式来实现这个需求。

3.3.1 路由参数

可以在路由规则中使用:来定义参数，参数值会作为路由路径的一部分。

const routes = [
  { path: '/user/:id', component: User }
]

在上面的代码中，我们定义了一个路由规则，路径为/user/:id，其中:id表示一个参数。当路径为/user/123时，路由会匹配到对应的组件，并将参数值传递给组件。

3.3.2 查询参数

除了路由参数，还可以使用查询参数来传递数据。

this.$router.push({ path: '/user', query: { id: 123 }})

在上面的代码中，我们使用query属性来传递查询参数，参数值会以键值对的方式添加到URL中。

3.4 重定向

在某些情况下，可能需要将用户重定向到另一个页面。Vue Router提供了redirect字段来实现重定向。

const routes = [
  { path: '/home', redirect: '/' }
]

在上面的代码中，我们定义了一个路由规则，将路径/home重定向到/。

4. 路由守卫

Vue Router还提供了一套路由守卫机制，可以在路由切换时执行一些操作，例如验证用户身份、校验表单等。

4.1 全局前置守卫

全局前置守卫会在每次路由切换前被调用，可以使用beforeEach方法来注册全局前置守卫。

router.beforeEach((to, from, next) => {
  // 执行一些操作
  next()
})

在上面的代码中，我们注册了一个全局前置守卫，通过next函数来控制路由的流向。

4.2 路由独享的守卫

除了全局前置守卫，还可以在路由规则中定义路由独享的守卫。

const routes = [
  { path: '/user', component: User, beforeEnter: (to, from, next) => {
    // 执行一些操作
    next()
  }}
]

在上面的代码中，我们在路由规则中定义了一个beforeEnter字段，该字段对应一个函数，会在该路由被激活时调用。

4.3 组件内的守卫

除了全局前置守卫和路由独享的守卫，还可以在组件内定义守卫。

export default {
  beforeRouteEnter (to, from, next) {
    // 执行一些操作
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 执行一些操作
    next()
  }
}

在上面的代码中，我们在组件内定义了beforeRouteEnter和beforeRouteLeave函数，它们分别在组件被路由激活和从路由中离开时调用。