Vue-Router的使用

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

Vue Router是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
下面介绍几个简单示例带你了解并熟练使用Vue Router 创建一个简单的单页面应用开启,这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

普通路由

1. 创建组件

首先引入vue.js和vue-router.js：

//引入本地的 Vue.js、vue-router.js 文件
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

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

//创建  Home 组件
var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})
//创建  About  组件
var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

2. 创建Router

//创建Vue-Router 路由
var router = new VueRouter()

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

3. 映射路由

router.map({
     //路径与组件 一 一 映射
    '/home': { component: Home },
    '/about': { component: About }
})

调用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>

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

5. 使用标签，路由出口

<router-view></router-view>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件，表示路由组件的要显示在什么地方。

6. 启动路由

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

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

嵌套路由(02)

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

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

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

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

组件模板：

    <!-- 创建home组件 -->
<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>
    
<!-- 创建news组件 -->
    
<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>

组件构造器：

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'
})

路由映射：

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

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

该示例运行如下：

注意：这里有一个概念要区分一下，/home/news和/home/message是/home路由的子路由，与之对应的News和Message组件并不是Home的子组件。