Vue.js 路由跳转详解

Vue.js 是一款用于构建用户界面的渐进式框架。Vue.js 路由可以让你构建单页应用程序 (SPA，Single-Page Application)。本篇文章将详细讲解在 Vue.js 中如何进行路由跳转。

准备工作

在开始路由跳转之前，需要安装 Vue.js 的路由组件。可以根据官方文档进行安装，步骤如下：

在命令行里输入以下命令安装路由组件

npm install vue-router

在 Vue 应用中引入并使用路由组件

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

Vue.use(VueRouter)
```

使用 Vue.use 方法将 VueRouter 安装到 Vue 中

跳转方式

声明式路由跳转

在 Vue 模板中声明式地路由跳转非常容易，只需要在需要跳转的链接上使用 router-link 组件即可。

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

以上代码中，to 属性告诉路由将要跳转到的地址。

编程式路由跳转

在代码中编程式地路由跳转，可以通过 router.push 方法实现。例如：

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

上述代码中，$router 是在 Vue 实例中创建的路由对象。通过 push 方法传递需要跳转的地址参数即可实现路由跳转。

嵌套路由

Vue.js 路由支持嵌套路由，这意味着我们可以在子路由上配置层级路由，从而在同一页面上呈现多个视图。下面是一个简单的嵌套路由的示例。

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

在上面的示例中，我们首先定义了一个根路由，它指向 Home 组件。我们还定义了两个子路由（about 和 contact），它们的父级路由是 Home 组件。

命名路由

在应用程序中，我们有时需要给路由命名，这样可以使代码更清晰。举个例子，如果你想要在组件内导航到一个路由，那么你可以使用这个命名路由。

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

在上述示例中，我们为路由定义了两个名字（home 和 about），以便我们在组件中使用。在组件内，使用 $router.push({ name: 'home' }) 就可以跳转到定义好的路由。

示例

下面是两个简单的示例，帮助你更好地理解 Vue.js 路由跳转。

示例一

假设我们有一个网站，有一个主页和一个文章详情页，我们可以使用以下代码实现路由跳转：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/article/:id',
      name: 'article',
      component: Article
    }
  ]
})

// 跳转到主页
this.$router.push({ name: 'home' })

// 跳转到文章详情页
this.$router.push({ name: 'article', params: { id: 1 }})

示例二

下面一个示例是使用嵌套路由来构建多个视图的简单 SPA。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Main,
      children: [
        {
          path: 'home',
          component: Home
        },
        {
          path: 'services',
          component: Services
        }
      ]
    },
    {
      path: '/about',
      component: About
    }
  ]
})

// 跳转到 services 视图
this.$router.push('/services')

在上述示例中，我们首先定义了一个根路由，并将其指向了 Main 组件。在 Main 组件中配合定义子路由，从而实现多个视图。在组件中使用 $router.push('/services') 实现跳转到 services 视图。