Vue Router的使用

1.导入vue-router组件类库

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

2.创建组件的模板对象

var home = {
      template: '#tmp'
    }
var login = {
      template: '<h3>登录组件</h3>'
    }
var reg = {
     template: '<h3>注册组件</h3>'
  }

3.创建一个路由 router 实例，通过 routes 属性来定义路由匹配规则
每个路由规则，都是一个对象，有两个必须的属性：
属性1 是 path， 表示监听的路由链接地址；
属性2 是 component，表示对应前面匹配到的 path的组件；
注意： component 的属性值，必须是一个组件的模板对象， 不能是组件的引用名称。

var router = new VueRouter({
        routes: [{ // 路由匹配规则 
            path: '/home',
            component: home,
            // 使用 children 属性，实现子路由，同时子路由的 path 前面不要带 / ，否则永远以根路径开始请求，这样不方便用户去理解URL地址
            children: [{
                path: 'login',
                component: login
            }, {
                path: 'reg',
                component: reg
            }]
        }]
    })

4.使用 router 属性来使用路由规则

var vm = new Vue({
        el: '#app',
        router //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件(router:router)
})

5.1使用 router link 组件来导航
5.2 使用 router-view 组件来显示匹配到的组件
知识点：1.通过传入‘to’属性指定链接
2.router-link 默认会被渲染成一个 标签

<div id="app">
        <router-link to="/home">主页</router-link>
        <router-view></router-view>
</div>
<template id="tmp">
        <div>
            <h1>主页组件</h1>
            <router-link to="/home/login">登录</router-link>
            <router-link to="/home/reg">注册</router-link>
            <router-view></router-view>
        </div>
  </template>