vue.js路由实例讲解

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

实现以下功能：

路由.gif

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

实现步骤：

• 导入vue-router库

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

登录
注册

router-link

• 使用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的有趣实例，请点击移步至目录