Vue Router 返回|极客教程

Vue Router 返回

1. Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 之间是一个单向数据流的关系。Vue Router 通过一个插件化的方式进行配置，使得我们可以根据不同的路由地址，动态地切换视图并渲染相应的组件。在大型的 Vue.js 项目中，使用 Vue Router 可以将应用逻辑分割为多个视图，提高项目的可维护性和代码的模块化程度。

2. Vue Router 基本用法

在 Vue.js 项目中使用 Vue Router 非常简单，只需要在项目中安装 Vue Router 并在 Vue 实例中注册即可开始使用。下面是一个简单的示例代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

在上面的示例代码中，首先使用 import 语句引入 Vue 和 Vue Router，并在 Vue 中使用 Vue.use(VueRouter)方法注册 Vue Router 插件。然后定义了两个组件 Home 和 About，并创建了一个 routes 数组，声明了两个路由，分别对应 '/' 和 '/about' 路径。最后通过 new VueRouter() 创建了一个新的 VueRouter 实例，并将其配置到 Vue 实例中。

3. Vue Router 路由跳转

Vue Router 提供了几种方式来实现路由跳转，最常见的是使用 <router-link> 组件和 router.push() 方法。

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

<router-link> 组件是 Vue Router 提供的用于导航到不同路由的组件，它会渲染成一个 <a> 标签，点击后会触发路由跳转。示例代码如下：

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

在上面的示例代码中，当用户点击 Home 和 About 链接时，会分别跳转到 '/' 和 '/about' 路径。

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

除了使用 <router-link> 组件外，我们还可以通过编程式导航的方式来实现路由跳转，即使用 router.push() 方法。示例代码如下：

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

在上面的示例代码中，通过 this.$router.push() 方法可以实现在代码中进行路由跳转。其中 this.$router 是 VueRouter 的实例，通过调用 push('/') 方法或 push('/about') 方法可以分别跳转到 '/' 和 '/about' 路径。