Vue快速学习笔记(5)使用路由vue-router(1)

在Vue中使用路由vue-router

1. html中导入vue-router.
2. 编写router-link和router-view标签代码
3. JavaScript中编写模板对象，定义路由对象及创建Vue实例。

具体代码参考：

<div id="app">
    <!-- 使用router-link定义组件导航 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 使用 router-view 显示匹配的组件 -->
    <router-view></router-view>
</div>

<script>
    const login = {
        template: '<h1>登录组件</h1>'
    }
    const register = {
        template: '<h1>注册组件</h1>'
    }

    // 创建一个路由示例，通过routers属性来匹配规则
    const routerobj = new VueRouter({
        routes: [{
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                component: login
            },
            {
                path: '/register',
                component: register
            }
        ]
    });
    // 穿件Vue实例
    var vm = new Vue({
        el: '#app',
        router: routerobj
    });
</script>