vue-router的使用步骤

1. 导入文件

<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>

2. 添加路由链接

3. 添加路由占位符

<div id="app">
        <!-- 添加路由链接 -->
        <router-link to="/user">user</router-link>
        <router-link to="/register">register</router-link>
        <!-- 添加路由占位符 -->
        <router-view></router-view>
</div>

router-link标签会渲染成a标签；to属性会渲染成href属性；属性值会渲染成以#开头的hash地址。

4. 定义路由组件

        // 4. 定义路由组件
        var User = {
            template: '<div>我是User组件</div>'
        };
        var Register = {
            template: '<div>我是Register组件</div>'
        };

定义的路由组件，会渲染到路由占位符（也叫路由填充位）。

5. 配置路由规则并创建路由实例

        // 5. 创建路由实例对象，配置路由规则
        var router = new VueRouter({
            // 在这里 routes数组就是 路由规则数组
            routes: [{
            	// path匹配hash地址
                path: '/user',
                // component根据路由规则确定要展示的组件
                component: User
            }, {
                path: '/register',
                component: Register
            }, ],
        });

记住，所谓路由规则，就是routes数组。

6. 将路由实例挂载到根vue实例中

        // 将路由挂载到vue根实例中
        const vm = new Vue({
            el: '#app',
            data: {},
            // 挂载 保证路由规则生效
            router: router,
        });

注：

1. 导入文件
2. 添加路由链接
3. 添加路由占位符
4. 定义路由组件
5. 配置路由规则并创建路由实例
6. 将路由实例挂载到根vue实例中