Vuejs路由跳转——vue-router的使用详解

Vuejs是一个非常优秀的前端框架，通过使用vue-router插件可以帮助我们轻松地实现单页应用SPA（Single-Page Application）.本篇攻略将详细介绍Vuejs的路由使用。

Vue-router是什么？

vue-router是Vue.js官方的路由插件。它可以轻松的帮助我们实现页面跳转。

安装vue-router

可以通过npm来安装vue-router这个插件：

npm install vue-router --save

在Vue.js中引入vue-router

在main.js中引入vue-router：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

配置路由映射

在main.js中创建路由映射：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'about',
    component: AboutComponent
  }
]

其中path表示路径，component表示要显示的组件。在这个例子中，路由有两个，分别为'/'和'/about'。显示的组件分别为HomeComponent和AboutComponent。

创建vue-router实例

在main.js中创建vue-router实例：

const router = new VueRouter({
  routes
})

启动vue-router

将router注入到Vue实例中：

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

现在我们已经完成了vue-router的基础配置，可以开始利用vue-router实现页面跳转了。

Vue-router的跳转方式

Vue-router提供了三种方式用来实现路由的跳转:

声明式跳转

在模板中使用组件来声明跳转：

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

编程式跳转

在Vue组件中使用$router对象来实现跳转:

this.$router.push('/')

命名路由跳转

在Vue组件中使用$router对象和命名路由来实现跳转:

this.$router.push({ name: 'home' })

示例1

下面是一个实际运用的例子。我们从首页引入了一个header组件，并声明了一个router-link用来跳转：

<template>
  <div id="app">
    <header>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About Us</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

在Vue-router的配置中，我们需要指定路由的component:

const routes = [
  {
    path: '/',
    component: HomeComponent,
    name: 'home'
  },
  {
    path: '/about',
    component: AboutComponent,
    name: 'about'
  }
]

现在我们就可以在HomeComponent和AboutComponent中编写html代码，这些代码将会在用户跳转到路由时显示。

示例2：带有参数的路由

我们需要将路由定义为带有参数的形式:

const routes = [
  {
    path: '/person/:id',
    component: PersonComponent,
    name: 'person'
  }
]

在组件中调用时，可以通过$router对象的params对象来获取这些参数:

created: function () {
  console.log(this.$route.params.id)
}

现在无论我们怎么更改/person/后面的参数，都能正确地捕获它并在组件中使用。