开发者学堂课程【Vue.js 入门与实战:复习-基本路由的使用】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8203
复习-基本路由的使用
一,创建及使用路由的步骤
1.第一步导包:
<script src "./1ib/vue-2.4.0.js"></script> <scxipt src="./lib/vue-router-3.0.1.js"></script>
2.第二步创建子组件:
var 1ogin ={ template: '<h3>这是登录子组件,这个组件是奔波霸开发的。</h3>'} var register={ template: '<h3>这是注册子组件,这个组件是霸波奔开发的。</h3>'}
3.第三步创建一个路由对象:
var router =new vueRouter (i routes: [//路由规则数组 {path: '/1ogin',component: login },{ path: '/register' ,component: register }1, linkActiveclass: 'myactive'//和激活相关的类})
4.第四步创建Vue实例,得到VieModel:
var vm=new vue (i el: '#app', data: {,methods: {3, l/ router : routerrouter });
5.第五步展示路由:
<div id="app"> <router-link to="/login">登录</router-link> <router-link to=" / register">注册</router-link> <!-- 容器--> <router-view></router-view> </ div>