Vue2 路由跳转

引言

在Vue开发中，路由（router）是一个非常重要的概念。路由控制着单页应用程序中不同组件的跳转和显示，为用户提供良好的交互体验。本文将详细介绍Vue2中如何进行路由跳转。

1. 安装Vue Router

Vue Router是Vue.js的官方路由插件，需要进行安装才能在Vue项目中使用。我们可以通过npm安装Vue Router：

npm install vue-router --save

2. 配置路由

在使用Vue Router之前，我们需要在项目中创建一个路由文件和配置路由规则。通常，我们会在项目的src目录下创建一个名为router的文件夹，并在该文件夹中创建一个名为index.js的文件。在index.js中，我们可以进行路由的配置。

首先，在index.js文件中引入Vue和Vue Router：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

然后，创建一个新的Vue Router实例：

const router = new Router({
  routes: [
    // 在这里配置路由规则
  ]
});

在routes数组中，我们可以配置各个路由规则。每个路由规则都包含一个path字段和一个component字段。

path用于指定路由的路径，可以是字符串或者正则表达式。例如，使用字符串指定路径：

{
  path: '/home',
  component: Home
}

这样，当用户访问/home路径时，将会显示Home组件。

component用于指定路由对应的组件。例如，我们可以创建一个名为Home的组件：

import Home from './components/Home.vue';

{
  path: '/home',
  component: Home
}

3. 路由跳转

3.1 使用`<router-link>`进行跳转

在Vue Router中，我们可以使用<router-link>组件来创建一个跳转链接。<router-link>组件会被渲染为一个<a>标签，点击该链接时会触发路由跳转。

例如，我们可以在页面上创建一个链接，点击该链接后跳转到/home路径：

<router-link to="/home">Home</router-link>

这样，当用户点击Home链接时，将会自动跳转到/home路径，并显示Home组件。

3.2 使用`$router`进行跳转

除了使用<router-link>组件进行跳转之外，我们还可以在Vue组件中使用$router对象进行跳转。

在Vue组件中，我们可以通过$router.push()方法进行跳转。例如，我们可以在一个按钮的点击事件中调用$router.push()方法来实现跳转：

methods: {
  goToHome() {
    this.$router.push('/home');
  }
}

这样，当用户点击按钮时，将会触发跳转到/home路径，并显示Home组件。

3.3 动态路由

有时候，我们需要根据不同的参数动态生成路由链接。在Vue Router中，我们可以使用动态路由来实现这一功能。

在路由配置中，我们可以使用:来指定一个参数。例如，我们可以创建一个动态路由，参数名为id：

{
  path: '/user/:id',
  component: User
}

在组件中，我们可以通过$route.params来获取路由参数的值。例如，在User组件中：

mounted() {
  console.log(this.$route.params.id);
}

当用户访问/user/123路径时，this.$route.params.id的值将会是123。

4. 路由导航守卫

在Vue Router中，还有一个非常重要的概念叫做路由导航守卫。通过使用路由导航守卫，我们可以在路由跳转前后进行一些额外的操作，例如验证用户是否登录、处理页面刷新等。

Vue Router提供了3个导航守卫，分别是beforeEach、beforeResolve和afterEach。这些导航守卫可以在路由配置中进行配置。例如，我们可以在全局导航守卫中验证用户是否登录：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

在上述代码中，beforeEach导航守卫会在每次路由跳转前被调用。to参数表示即将跳转的目标路由，from参数表示当前所在的路由，next参数是一个回调函数，用于进行路由跳转。

在上述代码中，我们检查目标路由的元信息requiresAuth，如果用户未登录且目标路由需要验证，则跳转到登录页面。

5. 示例代码运行结果

下面是一个简单的使用<router-link>进行跳转的示例代码：

<template>
  <div>
    <h1>导航页</h1>
    <h2>请选择一个页面：</h2>
    <ul>
      <li><router-link to="/home">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
      <li><router-link to="/contact">Contact</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

点击Home、About和Contact链接后，页面将会显示对应的组件内容。