Vue知识点总结
Posted xiaodongxier
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue知识点总结相关的知识,希望对你有一定的参考价值。
一、指令
1.入门
<body>
<div id="app">
<div>{{msg}}</div> 1.标签用于填充数据 插值表达式
</div>
<script type="text/javascript" src="js/vue.js"></script> 2.引入vue.js库文件
<script>
var vm = new Vue({ 3.使用vue的语法
el: '#app',
data {
msg: 'Hello Vue' 4.把vue提供的数据填充到标签中
}
})
</script>
</body>
2. v-cloak 防止页面加载时出现闪烁问题
原理:先通过样式隐藏内容,在内存中进行值得替换,替换好之后显示最终结果
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data {
msg: 'Hello Vue'
}
})
</script>
</body>
3. v-text 将数据填充到标签中
作用于插值表达式,没有闪烁问题。
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化。插值变化,不影响数据对象的值
<body>
<div id="app">
<div v-text="msg"></div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data {
msg: 'Hello Vue'
}
})
</script>
</body>
4.v-html 可以将HTML片段填充到标签中,会将其当html标签解析后输出
5.v-pre 跳过编译,直接显示
6.v-once 执行一次性的插值,当数据改变时,插值处内容不会继续更新
应用场景: 显示后的信息后续不用再修改,用v-once
7.v-model 双向数据绑定
当数据发生变化的时候,视图会发生变化。
当视图发生变化的时候,数据也会跟着同步变化
限制在<input><select><textarea> components中使用
v-model原理(v-bind绑定数据,v-on处理数据)
<div id="app">
<input v-bind:value="msg" v-on:input="handle">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
handle: function(event){
this.msg = event.target.value;
}
}
})
</script>
8.v-on用来绑定事件的
- 无参
v-on:click 缩写 @click
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click="num++">点击</button>
<button @click="num++">点击1</button>
<button @click="handle">点击2</button>
<button @click="handle()">点击3</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app"
data: {
num: 0
},
methods: {
handle: function(){
console.log(this === vm)
this.num++;
}
}
})
</script>
- v-on事件函数传入参数
<div>
<div>{{num}}</div>
<button v-on:click="handle">点击</button>
<button v-on:click="handle1(12, $event)">点击1</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function(event){
console.log(event.target.innerHTML)
},
handle1: function(p, event){
console.log(p)
console.log(event.target.innerHTML)
this.num++
}
}
})
</script>
- 事件修饰符
<a v-on:click.stop="doThis"></a>
<a v-on:click.submit.prevent="onSubmit></a> <!--阻止默认"event.preventDefault()-->
v-on:click.stop.prevent
v-on:click.prevent.self
v-on:click.self.prevent
- 按键修饰符
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input v-on:keyup.enter.space="alerMe">
常见按键修饰符
.enter .tab .delete .esc .space .up .down .left .right
自定义按键修饰符(通过config.keyCodes自定义按键修饰符别名)
<div id="app">
<input v-on:keydown.f5 = "prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
var vm = new Vue({
el: "#app",
methods: {
prompt: function(){
alter("我是f5");
}
}
})
</script>
9.v-bind属性绑定
v-bind:href 缩写为href(对应js的getAttribute / setAttribute)
- 绑定对象
可以给v-bind:class一个对象,以动态地切换class。
注:v-bind:class 指令可以与普通class特性共存
<ul v-bind:class="{textColor: isColor, textSize: isSize}">
<li>学习</li>
<li>Js</li>
</ul>
<div v-bind:style="{color: activeColor, fontSize: activeSize}">对象语法</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isColor: true,
isSize: true,
active: "red",
active: "25px"
}
})
</script>
- 绑定数组
<ul :class="[classA, classB]">
<li>学习</li>
</ul>
<div :style="[styleObj1, styleObj2]"></div>
<script>
var vm = new Vue({
el: "#app",
data: {
classA: 'textColor',
classB: 'textSize'
},
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '30px'
}
})
</script>
10.v-if
11.v-show
12.v-for 可循环对象/数组/普通元素
二、Vue常用特性
1.表单基本操作
获取单选框里面的值,v-model
获取复选框里面的值,v-model
获取下拉框和文本框中的值,v-model
2.表单修饰符
.number
.trim
.lazy
3.自定义指令
1.Vue.directive注册全局指令
<input type="text" v-focus>
<input type="text" v-color="msg">
<script>
Vue.directive('focus',{
inserted: function(el){
el.focus()
}
})
Vue.directive('color', {
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'blue'
}
}
})
</script>
- 在directives中注册局部指令
<input type="text" v-focus>
<input type="text" v-color="msg">
<script>
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'blue'
}
}
directives: {
color: {
inserted:function(el){
el.focus()
}
},
focus: {
bind:function(el, binding){
el.style.backgroundColor = binding.value.color;
}
}
}
})
4.计算属性computed(他们的响应式依赖缓存)
适合对多个变量或对象进行处理后返回一个结果值。
在多个变量中的某一个值发生了变化,监控的这个值也会发生变化
<div>
<div>{{reverseString}}</div>
</div>
<script>
var vm = new Vue({
el: 'app',
data: {
num: 100
},
computed: {
reverseString: function(){
console.log('computed')
var total = 0;
for(var i=0 ; i <= this.num; i++){
total += i;
}
return total;
}
}
})
</script>
5.侦听器watch (watch中的属性一定是data中已经存在的数据)
当需要监听一个对象的改变时,普通的wacth方法无法监听到对象内部属性的改变。
只要data中的数据才能够监听到变化,此时需要deep属性对对象进行深度监听
<div id="app">
<div>
<span>名:</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓:</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
6.过滤器
应用:双花括号插值 和 v-bind表达式
支持级联操作
<div id="app">
<div>{{msg | upper | lower}}</div>
<div :abc='msg | upper'>测试数据</div>
<div> {{ message | filterA('arg1', 'arg2') }}</div>
</div>
<script type="text/javascript">
Vue.filter('lower', function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
Vue.filter('filterA',function(n,a,b){
if(n<10){
return n+a;
}else{
return n+b;
}
});
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
filters: {
upper: function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
</script>
7.生命周期钩子
常用的钩子函数
钩子函数 | 说明 |
---|---|
beforeCreate | 在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 |
created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 |
beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 |
mounted | el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件 |
beforeUpdate | 数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的 |
updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 页面上数据已经替换成最新的 |
beforeDestroy | 实例销毁之前调用 |
destroyed | 实例销毁后调用 |
9.动态数组响应式数据
Vue.set(a, b, c) //让触发视图重新更新一遍,数据动态展示
a 要更改的数据
b 数据的第几项
c 更改后的数据
三、Vue组件 component
1.全局注册
Vue.component('组件名称', {})
<div id="example">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>A custom </div>'
})
new Vue({
el: '#example'
})
</script>
组件注意事项
组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串
<div>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: `
<button @click="handle">点击{{count}}次数</button>
<div>测试</div>
`,
methods: {
handle: function(){
this.count += 2
}
}
})
</script>
2.局部注册
<div id="app">
<my-component></my-component>
</div>
<script>
var Child = { // 定义组件的模板
template: '<div>A custom component!</div>'
}
new Vue({
components: {
'my-component': Child
}
})
</script>
3.Vue组件之间传值--父组件向子组件传值
父组件发送的形式:是以形式绑定值到子组件身上 子组件接收的方式:用props接收
<div id="app">
<div>{{pmsg}}</div>
<menu-item title='来自父组件的值'></menu-item>
<menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript">
Vue.component('menu-item', {
props: ['title', 'content'],
data: function() {
return {
msg: '子组件本身的数据'
}
},
template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
ptitle: '动态绑定属性'
}
});
</script>
4.Vue组件之间传值--子组件向父组件传值
子组件:用
emit()第一个参数为自定义的事件名称,第二个参数为需要传递的数据
父组件:用v-on监听子组件的事件
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
## 1、子组件用$emit()触发事件
## 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
<button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(val){
this.fontSize += val;
}
}
});
</script>
5.Vue组件之间传值--兄弟组件之间传值
事件中心传递数据 提供事件中心 var hub = new Vue()
传递数据,通过一个事件触发hub.$emit(方法名,传递的数据)
接收数据,通过mounted() {}钩子中,触发hub.$on()方法名
销毁事件,通过hub.$off()方法名销毁之后无法进行传递数据
<div id="app">
<div>父组件</div>
<div>
<button @click='handle'>销毁事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
hub.$emit('tom-event', 1);
}
},
mounted: function() {
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
6.组件插槽
匿名插槽
<div id="app">
<alert-box>有bug发生</alert-box>
<alert-box>有一个警告</alert-box>
<alert-box></alert-box>
</div>
<script type="text/javascript">
/*
组件插槽:父组件向子组件传递内容
*/
Vue.component('alert-box', {
template: `
<div>
<strong>ERROR:</strong>
# 当组件渲染的时候,这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
# 插槽内可以包含任何模板代码,包括 HTML
<slot>默认内容</slot>
</div>
`
});
</script>
</body>
</html>
具名插槽
使用 中的 "name" 属性绑定元素
<div id="app">
<base-layout>
<p slot='header'>标题信息</p>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot='footer'>底部信息信息</p>
</base-layout>
<base-layout>
<template slot='header'>
<p>标题信息1</p>
<p>标题信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template slot='footer'>
<p>底部信息信息1</p>
<p>底部信息信息2</p>
</template>
</base-layout>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
具名插槽
*/
Vue.component('base-layout', {
template: `
<div>
<header>
### 1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
## 注意点:
## 具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序
<slot name='footer'></slot>
</footer>
</div>
`
});
</script>
</body>
</html>
作用域插槽
- 父组件对子组件加工处理
- 既可以复用子组件的slot,又可以使slot内容不一致
<div id="app">
<fruit-list :list='list'>
<template slot-scope='slotProps'>
<strong v-if='slotProps.info.id==3' class="current">
{{slotProps.info.name}}
</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</fruit-list>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('fruit-list', {
props: ['list'],
template: `
<div>
<li :key='item.id' v-for='item in list'>
## 1、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
## 插槽可以提供一个默认内容,如果如果父组件没有为这个插槽提供了内容,会显示默认的内容。
## 如果父组件为这个插槽提供了内容,则默认的内容会被替换掉
<slot :info='item'>{{item.name}}</slot>
</li>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: 'apple'
},{
id: 2,
name: 'orange'
},{
id: 3,
name: 'banana'
}]
}
});
</script>
</body>
</html>
四、接口调用方式
- 原生ajax
- 基于jQuery的ajax
- fetch
- axios
1.异步
- JS中常见的异步调用
- 定时任何
- ajax
- 事件函数
2. promise
promise
var p = new Promise(function(resolve, reject){
setTimeout(function(){
var flag = false;
if(flag) {
resolve('hello');
}else{
reject('出错了');
}
}, 100);
});
p.then(function(data){
console.log(data)
},function(info){
console.log(info)
});
promise发送Ajax
function queryData(url) {
var p = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText);
}else{
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
return p;
}
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data)
return queryData('http://localhost:3000/data1');
})
.then(function(data){
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data){
console.log(data)
});
promise常用API
function foo() {
return new Promise(function(resolve, reject){
setTimeout(function(){
reject('error');
}, 100);
})
}
foo() 等效 foo()
.then(function(data){ .then(function(data){
console.log(data) console.log(data)
},function(data){ }).catch(function(data){
console.log(data) console.log(data)
}) })
.finally(function(){ .finally(function(){
console.log('finished') console.log('finished')
}); });
function queryData(url) {
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText);
}else{
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
}
var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a2');
var p3 = queryData('http://localhost:3000/a3');
Promise.race([p1,p2,p3]).then(function(result){
console.log(result)
})
3.Fetch
fetch('http://localhost:3000/fdata').then(function(data){
// text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
return data.text();
}).then(function(data){
console.log(data);
})
4. Fetch API 调用接口传递参数
GET参数传递-传统URL
fetch('http://localhost:3000/books?id=123', {
method: 'get'
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
GET参数传递-restful形式的URL
fetch('http://localhost:3000/books/456', {
method: 'get'
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
DELETE请求方式参数传递
fetch('http://localhost:3000/books/789', {
method: 'delete'
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
POST请求传参
fetch('http://localhost:3000/books', {
method: 'post',
body: 'uname=lisi&pwd=123',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
PUT请求传参
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
5.Fetch响应结果的数据格式
fetch('http://localhost:3000/json').then(function(data){
// return data.json();
return data.text();
}).then(function(data){
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname,obj.age,obj.gender)
})
6.axios基本用法 (axios是个库)
axios.get('http://localhost:3000/adata').then(function(ret){
// 注意data属性是固定的用法,用于获取后台的实际数据
// console.log(ret.data)
console.log(ret)
})
7.axios请求参数传递
axios get请求传参
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
console.log(ret.data)
})
axios.get('http://localhost:3000/axios/123').then(function(ret){
console.log(ret.data)
})
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret){
console.log(ret.data)
})
axios delete 请求传参
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
axios post请求传参
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
axios put 请求传参
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
8.axios响应结果
axios.get('http://localhost:3000/axios-json').then(function(ret){
console.log(ret.data.uname)
})
9.axios全局配置
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
axios.get('axios-json').then(function(ret){
console.log(ret.data.uname)
})
10.axios拦截器
请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
config.headers.mytoken = 'nihao';
return config;
}, function(err){
console.log(err)
})
响应拦截器
axios.interceptors.response.use(function(res) {
// console.log(res)
var data = res.data;
return data;
}, function(err){
console.log(err)
})
11.async 函数基本用法
async/await 处理异步操作:
async函数返回一个Promise实例对象
await后面可以直接跟一个 Promise实例对象
axios 与 async
axios.defaults.baseURL = 'http:localhost:3000';
axios.get('adata').then(function(ret){
console.log(ret.data)
})
axios.defaults.baseURL = 'http:localhost:3000';
async function queryData() {
var ret = await axios.get('adata');
// console.log(ret.data)
return ret.data;
}
async 与 promise
async function queryData() {
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
resolve('nihao')
},1000);
})
// console.log(ret.data)
return ret;
}
queryData().then(function(data){
console.log(data)
})
12.async/await处理多个异步任务
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
var info = await axios.get('async1');
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})
五、路由 Vue-Router
1、路由:本质一种对应关系
路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现,并完成资源的分发
2).前端路由是依靠hash值(锚链接)的变化进行实现
2、前端路由
前端路由是基于hash值的变化进行实现的(比如点击页面中的菜单或者按钮改变URL的hash值,根据hash值的变化来控制组件的切换)
核心实现依靠一个事件,即监听hash值变化的事件
window.onhashchange = function(){
//location.hash可以获取到最新的hash值
location.hash
}
3.Vue Router
Vue Router的特性:
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为
4、Vue-Router使用
- A.导入js文件
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
- B.添加路由链接:是路由中提供的标签,默认会被渲染为a标签,to属性默认被渲染为href属性, to属性的值会被渲染为#开头的hash地址
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
- C.添加路由填充位(路由占位符)
<router-view></router-view>
- D.定义路由组件
var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }
- E.配置路由规则并创建路由实例
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
//每一个路由规则都是一个对象,对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址,component表示路由规则对应要展示的组件对象
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
- F.将路由挂载到Vue实例中
new Vue({
el:"#app",
//通过router属性挂载路由对象
router:myRouter
})
5.路由重定向
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//path设置为/表示页面最初始的地址,redirect表示要被重定向的新地址,设置为一个路由即可
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
6、嵌套路由,动态路由的实现方式
嵌套路由的概念
<body>
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
</div>
<script>
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/>
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<router-view />
<div>`
}
const Tab1 = {
template: '<h3>tab1 子组件</h3>'
}
const Tab2 = {
template: '<h3>tab2 子组件</h3>'
}
const router = new VueRouter({ // 创建路由实例对象
routes: [ // 所有的路由规则
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
{ path: '/register', component: Register, children: [ // children 数组表示子路由规则
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
] }
]
})
const vm = new Vue({ // 创建 vm 实例对象
el: '#app', // 指定控制的区域
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
动态路由匹配1使用$route.params.id来获取路径传参的数据
var User = { template:"<div>用户:{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
{ path: "/user/:id", component: User },
]
})
动态路由匹配2通过props来接收参数
var User = {
props:["id"],
template:"<div>用户:{{id}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
//如果props设置为true,route.params将会被设置为组件属性
{ path: "/user/:id", component: User,props:true },
]
})
动态路由匹配3将props设置为对象,那么就直接将对象的数据传递给 组件进行使用
var User = {
props:["username","pwd"],
template:"<div>用户:{{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
//如果props设置为对象,则传递的是对象中的数据给组件
{ path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
]
})
动态路由匹配4.如果想要获取传递的参数值还想要获取传递的对象数据,那么props应该设置为 函数形式。
var User = {
props:["username","pwd","id"],
template:"<div>用户:{{id}} -> {{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
//如果props设置为函数,则通过函数的第一个参数获取路由对象
//并可以通过路由对象的params属性获取传递的参数
//
{ path: "/user/:id", component: User,props:(route)=>{
return {username:"jack",pwd:123,id:route.params.id}
}
},
]
})
7.命名路由以及编程式导航
命名路由:给路由取别名
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过name属性为路由添加一个别名
{ path: "/user/:id", component: User, name:"user"},
]
})
//添加了别名之后,可以使用别名进行跳转
<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>
//还可以编程式导航
myRouter.push( { name:'user' , params: {id:123} } )
编程式导航:通过点击链接的方式实现的导航 编程式导航:调用js的api方法实现导航
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );//n为数字,参考history.go
this.$router.go( -1 );
以上是关于Vue知识点总结的主要内容,如果未能解决你的问题,请参考以下文章