Vue.js路由vue-router使用方法详解

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

本文将以示例的形式来介绍vue-router的各个特性，一共包含6个示例，每个示例都有乞丐版，前5个示例有皇帝版。
乞丐版是将所有代码混杂在一起的HTML页面，皇帝版是基于vue-webpack-simple模板构建的。

第一个单页面应用(01)

现在我们以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

1. 创建组件
首先引入vue.js和vue-router.js：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

</div>

然后创建两个组件构造器Home和About：

var Home = Vue.extend({
 template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
 data: function() {
  return {
   msg: 'Hello, vue router!'
  }
 }
})

var About = Vue.extend({
 template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

</div>

2. 创建Router

var router = new VueRouter()

</div>

调用构造器VueRouter，创建一个路由器实例router。

3. 映射路由

router.map({
 '/home': { component: Home },
 '/about': { component: About }
})

</div>

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。
例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。

4. 使用v-link指令

<div class="list-group">
 <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
 <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

</div>

在a元素上使用v-link指令跳转到指定路径。

5. 使用<router-view>标签

<router-view></router-view>

</div>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

6. 启动路由

var App = Vue.extend({})
router.start(App, '#app')

</div>

路由器的运行需要一个根组件，router.start(App, '#app') 表示router会创建一个App实例，并且挂载到#app元素。
注意：使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。

View Demo

当你从GitHub上获取到最新的源代码后，如果想运行皇帝版，以demo01为例，在GitBash下执行以下命令：npm run demo01-dev

然后在浏览器中访问地址http://127.0.0.1:8080

如果要编译和发布，请在Git Bash下执行以下命令：

npm run demo01-build

编写单页面的步骤

上面的6个步骤，可以说是创建一个单页面应用的基本步骤：

JavaScript

• 创建组件：创建单页面应用需要渲染的组件
• 创建路由：创建VueRouter实例
• 映射路由：调用VueRouter实例的map方法
• 启动路由：调用VueRouter实例的start方法
  

HTML

• 使用v-link指令
• 使用<router-view>标签
  

router.redirect

应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：

router.redirect({
 '/': '/home'
})

</div>

router.redirect方法用于为路由器定义全局的重定向规则，全局的重定向会在匹配当前路径之前执行。

执行过程
当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情：

• vue-router首先会去查找v-link指令的路由映射
• 然后根据路由映射找到匹配的组件
• 最后将组件渲染到<router-view>标签

嵌套路由(02)

嵌套路由是个常见的需求，假设用户能够通过路径/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

实现嵌套路由有两个要点：

• 在组件内部使用<router-view>标签
• 在路由器对象中给组件定义子路由

现在我们就动手实现这个需求。

组件模板：

<template id="home">
 <div>
  <h1>Home</h1>
  <p>{{msg}}</p>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li>
    <a v-link="{ path: '/home/news'}">News</a>
   </li>
   <li>
    <a v-link="{ path: '/home/message'}">Messages</a>
   </li>
  </ul>
  <router-view></router-view>
 </div>
</template>

<template id="news">
 <ul>
  <li>News 01</li>
  <li>News 02</li>
  <li>News 03</li>
 </ul>
</template>
<template id="message">
 <ul>
  <li>Message 01</li>
  <li>Message 02</li>
  <li>Message 03</li>
 </ul>
</template>

</div>

组件构造器：

var Home = Vue.extend({
 template: '#home',
 data: function() {
  return {
   msg: 'Hello, vue router!'
  }
 }
})

var News = Vue.extend({
 template: '#news'
})

var Message = Vue.extend({
 template: '#message'
})

</div>

路由映射：

router.map({
 '/home': {
  component: Home,
  // 定义子路由
  subRoutes: {
   '/news': {
    component: News
   },
   '/message': {
    component: Message
   }
  }
 },
 '/about': {
  component: About
 }
})

</div>

在/home路由下定义了一个subRoutes选项，/news和/message是两条子路由，它们分别表示路径/home/news和/home/message，这两条路由分别映射组件News和Message。

该示例运行如下：

View Demo

注意：这里有一个概念要区分一下，/home/news和/home/message是/home路由的子路由，