复习-基本路由的使用|学习笔记

简介: 快速学习复习-基本路由的使用

开发者学堂课程【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>

目录
打赏
0
0
0
0
55
分享
相关文章
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
119 0
【Java编程实现 9 * 9 乘法表格打印四种形态,七种打法】
【Java编程实现 9 * 9 乘法表格打印四种形态,七种打法】
109 0
leetcode-每日一题729. 我的日程安排表 I
我们把安排成功的日程插入到日历切片里,Book方法只需要遍历日历切片,如果存在时间交叉的日程则直接返回 false, 没有则将日程插入到日历切片当中,返回true
146 0
leetcode-每日一题729. 我的日程安排表 I
XStream(可把javabean转换成XMI的小工具)|学习笔记
快速学习XStream(可把javabean转换成XMI的小工具)
114 0
2. Spring早期类型转换,基于PropertyEditor实现(下)
2. Spring早期类型转换,基于PropertyEditor实现(下)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等