2023Vue下如何实现前端路由跳转？

Vue是一款优秀的前端框架，在应用开发中，前端路由跳转是非常常见的需求。Vue提供了丰富的功能来实现路由跳转。本文将介绍Vue内置的路由实现方式，以及第三方路由库Vue-Router的使用。

一、Vue内置路由实现方式

在Vue中，可以使用内置的vue-router实现前端路由跳转。

1. 安装vue-router

使用npm命令安装vue-router库：

npm install vue-router

2. 创建Vue Router 对象

在Vue项目主文件（如：main.js）中创建Vue Router对象并绑定到Vue实例中。如下所示：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // 路由配置
})
new Vue({
  router
}).$mount('#app')

在代码中，我们首先引入了vue-router，并将其绑定到Vue实例上。然后创建了一个Vue Router对象，并且把它放到Vue实例中。

3. 路由配置

在创建Vue Router对象时，需要对路由进行配置。Vue Router中的配置主要包括路由路径、路由组件、路由别名以及任意的其他参数。路由路径对应URL中的路径部分，路由组件定义了该路径下要展示的组件。

例如，我们要为一个页面创建一个路由，在路由配置的时候可以这样写：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }
  ]
})

其中，路由路径为“/about”，对应的组件为About。

4. 路由跳转

有了路由配置，我们就可以使用Vue Router内置的路由跳转功能了。Vue Router提供了router-link标签和router.push方法来实现路由跳转。

1) 使用router-link标签

在HTML模板中可以使用router-link标签来创建一个路由链接。router-link标签会自动根据路由配置生成正确的URL。

例如：

<router-link to="/about">关于我们</router-link>

在点击关于我们的链接时，会跳转到配置的路由路径“/about”对应的组件页面。

2) 使用router.push方法

除了使用router-link标签，Vue Router还提供了router.push方法来实现路由跳转。

例如：

this.$router.push('/about')

在Vue组件中，我们可以使用this.$router来获取Vue Router实例，并使用push方法来实现跳转。这段代码将会跳转到路由路径为“/about”的组件页面。

二、Vue-router

Vue-Router是一个基于Vue.js的官方路由器。它是Vue.js官方发布的路由管理器，提供了强大的功能，比如路由嵌套、动态路由、路由懒加载等等。下面我们就来看看如何使用Vue-Router来实现前端路由跳转。

1. 安装Vue-Router

在使用Vue-Router前，需要先将它安装到项目中。我们可以使用npm命令进行安装。

npm install vue-router --save

2. 创建路由实例

在创建Vue路由时，我们可以先将需要跳转的页面组件（包括嵌套子组件）的相关路由信息配置到一个数组中。

例如：

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

该数组定义了三个路由信息，其中第一个路由信息定义了默认跳转页面为Home，第二个路由信息定义了跳转页面为About，第三个路由信息定义了跳转页面为User，并且该路由信息需要传递id参数。

接下来，我们可以通过Vue-Router的createRouter方法创建路由实例。

例如：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

在代码中，我们使用Vue-Router的createRouter方法创建了一个路由实例，定义了路由的历史记录管理方式和路由信息。其中，createWebHistory表示采用HTML5 History API进行路由管理。

3. 注册路由

在创建路由实例后，我们需要将路由实例注册到Vue应用实例中。

例如：

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
createApp(App)
.use(router)
.mount('#app')

在代码中，我们将路由实例通过createApp的use方法注册到Vue应用实例中。

除了注册路由实例，我们还可以通过Vue-Router提供的路由导航组件router-view和路由链接组件router-link来实现路由跳转。

例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{name: 'user', params: {id: userId}}">User</router-link>
<router-view></router-view>

在代码中，我们用router-link标签创建了三个跳转链接，用router-view标签展示了路由组件对应的内容。其中第三个链接需要传递一个动态的参数id。

4. 路由跳转

Vue-Router提供了多种方式实现路由跳转，例如：

• 使用router-link组件；
• 在Vue组件中使用this.$router.push()方法；
• 在Vue组件中使用this.$router.replace()方法；
• 在Vue组件中使用this.$router.go()方法；
• 使用在Vue组件中使用this.$route.back()方法。

例如，在Vue组件中使用router.push方法实现路由跳转：

import { reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            userId: ''
        })
        const handleRoute = function() {
            router.push({
                name: 'user',
                params: { id: state.userId }
            })
        }
        return {
            state,
            handleRoute
        }
    }
}

在代码中，我们在Vue组件中使用reactive创建了一个对象，然后在handleRoute方法中，使用router.push方法实现路由跳转。其中，name字段对应的router-link或路由信息的name属性，params是一个对象，该对象包含路由所需的动态参数。

结语

Vue-Router是一个非常强大、易用的路由管理器。在Vue应用程序中，使用Vue-Router可以轻松实现路由跳转，以及路由跳转时所需要的参数传递。对于开发者而言，这使得编写单页面应用程序变得十分简单和高效。