深入浅出学Vue(六) | Vue路由router

Vue路由

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

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

而它的实现原理是基于url的hash值来 实现的。

安装

CDN引入

<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

直接下载

文件

注意：引入需要在Vue.js后面引入

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

NPM引入

npm install vue-router

初识vue-router

注意：模板定义的位置要在vue-router前面，不然将无法显示。

引入资源文件后，只需要简单的几步就可以使用vue-routerle。

1. 构造路由对象
2. 设置路由匹配规则（可多个）
3. 设置路由匹配规则属性
4. 注册路由对象
5. 设置占位符标签展示组件

<div id="app">
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <!-- 路由占位符标签，路由匹配的结果组件将会匹配到此标签 -->
    <router-view></router-view>
</div>

<template id="login">
    <div>
        <h1>登录组件</h1>
    </div>
</template>
<template id="register">
    <div>
        <h1>注册组件</h1>
    </div>
</template>
<script type="text/javascript">
    //定义组件对象
    var login = {
     
        template: '#login'
    }
    var register = {
     
        template: '#register'
    }
    //1. 构造路由对象,引入资源文件后,就可以使用路由构造器来创建路由构造对象.
    var routerObj = new VueRouter({
     
        // 2. 设置路由匹配规则route， routes路由组中的每个路由匹配规则都是一个对象
        routes: [
            //3. 设置必要属性1：path,表示哪个监听的url路径
            //          属性2 component,表示监听到url后的显示组件
            {
     
                path: '/login',
                component: login
            },
            {
     
                path: '/register',
                component: register
            }
        ]
    })
    var app = new Vue({
     
        el: '#app',
        //4. 注册路由对象,使它能够监听本页url地址的改变
        router: routerObj
    })
</script>

问题：组件对象没有注册就可以交由router对象使用？

猜测：定义了组件对象之后，路由构造器内部应该存在某个方法，可以将组件注册为路由器专门使用。

router-link

除了使用a标签的链接形式来改变url的路径，Vue还为我们提供了一个专门用于改变url的标签，即router-link标签。

• router-link标签通过to属性来指向新的url。
• router-link标签通过tag属性来指定显示的标签样式，默认为a标签。

<div id="app">