vue.js路由实例讲解

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

<router-link to="/login" tag="button" class="btn btn-success">登录</router-link>
<router-link to="/register" tag="button" class="btn btn-danger col-lg-offset-2">注册</router-link>

<router-view></router-view>

let login = {
    template: '#login',
};
let register = {
    template: '#register',
};

let router = new VueRouter({
    routes: [ // 路由匹配规则
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register },
    ],
});

let vm = new Vue({
    el: "#app",
    data: {},
    router: router // 用于监听url地址的变化，然后展示对应的组件
});