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地址的变化，然后展示对应的组件
});
路由
