vue.js路由实例讲解

vue.js的路由功能由vue-router提供

实现以下功能：

路由.gif

登录和注册两个按钮分别对应login和register路由

实现步骤：

• 导入vue-router库

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

• 使用router-link组件生成点击导航

<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-link

• 使用router-view组件显示匹配到的组件

<router-view></router-view>

• 创建相关组件

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

• 创建路由router实例

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

• 通过router属性使用路由规则

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

具体代码

路由

更多vue.js的有趣实例，请点击移步至目录