20.Vue中的路由
1.前端路由:对于单页面程序来说,主要通过URL中的hash(#)来实现不同页面之间的切换的方式。
2.在vue中使用vue-router来实现路由
(1)导入vue-router组件类库
(2)使用router-link组件来导航
(3)使用router-view组件来显示匹配到的组件
(4)创建组件
(5)创建路由对象router,通过routers属性来定义路由匹配规则
(6)使用router属性来使用路由规则(把路由对象挂载到vue实例上)
实例:
<!-- 1. 导入 vue-router 组件类库 -->
<script src="./lib/vue-router-2.7.0.js"></script>
<!-- 2. 使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>
// 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
template: '<h1>登录组件</h1>'
});
// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: '<h1>注册组件</h1>'
});
// 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
// 6. 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
注意:
每个路由规则都是一个对象,必须有两个属性:
(1)path:表示监听的路由链接地址
(2)component:表示路由的path地址对应的组件(component的属性值必须是一个组件的模板对象,不能是组件的引用名称)
使用tag属性指定router-link渲染的标签类型,默认为a标签
<router-link to="/login" tag="span">登录</router-link>
21.路由重定向
{path:'/',redirect:'/login'}
22.路由高亮显示
方式:
(1)修改默认的类样式:router-link-active
(2)设置与样式相关的类:linkActiveClass:“myActive”
23.路由切换动效
1.添加动画
2.使用mode属性设置动画的方式
3.设置动画样式
<transition mode="out-in">
<router-view></router-view>
</transition>
24.路由传参
(1)使用params方式传递参数
//规则中定义参数
{ path: '/register/:id', component: register }
//通过this.$route.params来获取路由中的参数
var register = Vue.extend({
template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
});
(2)使用query方式传递参数
//在路由中使用查询字符串给路由传参,不需要改变路由规则的path属性
<router-link to='/login?id=123&name=zs'></router-link>
//引用
console.log(this.$route.query.id)
25.路由嵌套
使用children属性实现路由嵌套
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<script>
// 父路由中的组件
const account = Vue.extend({
template: `<div>这是account组件
<router-link to="/account/login">login</router-link> |
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>`
});
// 子路由中的 login 组件
const login = Vue.extend({
template: '<div>登录组件</div>'
});
// 子路由中的 register 组件
const register = Vue.extend({
template: '<div>注册组件</div>'
});
// 路由实例
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
{
path: '/account',
component: account,
children: [ // 通过 children 数组属性,来实现路由的嵌套
{ path: 'login', component: login }, // 注意,子路由的开头位置,不要加 / 路径符
{ path: 'register', component: register }
]
}
]
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
account
},
router: router
});
</script>
注意:使用children属性,实现子路由,同时子路由的path前面不带/,否则永远以根路径开始请求,这样不方便用户去理解URL地址
26.watch属性
监测属性值的变化,当属性值发生改变时会触发执行回调函数来执行一系列操作
//使用watch来监听data中属性值得变化
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen',
fullName: 'jack - chen'
},
methods: {},
watch: {
'firstName': function (newVal, oldVal) { // 第一个参数是新数据,第二个参数是旧数据
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
</script>
27.computed
计算属性的使用
计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新。
特点:计算属性第一次调用时进行执行并将结果进行缓存,下次调用时直接从缓存中获取结果,只有当计算属性中所引用的任何一个data属性改变之后,都会重新出发该计算性进行重新计算,从而更新缓存中的值
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 点击按钮重新为 计算属性 fullName 赋值 -->
<input type="button" value="修改fullName" @click="changeName">
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {
changeName() {
this.fullName = 'TOM - chen2';
}
},
computed: {
fullName: {
get: function () {
return this.firstName + ' - ' + this.lastName;
},
set: function (newVal) {
var parts = newVal.split(' - ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
});
</script>
28.watch
、computed
和methods
之间的对比
1.watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作。
键是需要观察的表达式,值是对应回调函数,可以看做是computed和methods的结合体
2.computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。
3.methods表示一个具体的操作,主要书写业务逻辑
29.使用render函数渲染组件
new Vue({
el:'#app',
data:{},
methods:{},
components:{
},
render:function(createElement){
return createElement(login)
}
})
**注意:**render函数和component的区别
(1)render函数会覆盖式渲染,相当于v-text
(2)component式插入式渲染,相当于v-html