vue.js 的路由功能由 vue-router https://router.vuejs.org/ 提供
实现以下功能:
路由. 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 地址的变化, 然后展示对应的组件
- });
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/36.html
路由
来源: http://www.jianshu.com/p/a3334d6779e1