什么是路由
- 后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器的资源;
- 前端路由: 对于单页面应用程序来说,主要是通过URL中的hash(#)来实现不同页面之间的跳转,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;
- 在点页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);
在 Vue 中使用 vue-router
- 导入 vue-router 组件类库
<script src="./lib/vue-router-3.1.3.js"></script>
- 使用
Vue.extend
创建组件
// 使用 Vue.extend 创建登录组件
var login = Vue.extend({
template: '<h1>登录组件</h1>'
});
// 使用 Vue.extend 创建注册组件
var register = Vue.extend({
template: '<h1>注册组件</h1>'
});
- 创建一个 router 实例, 通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routers: [
// 1, path 表示监听哪个路由链接地址
// 2, component 表示是 如果 路由是前面匹配到的 path 则展示 component 属性对应的那个组件
// 注意: component 必须是 组件模板对象, 不能是组件的引用名称
{ path: '/login', template: login},
{ path: '/register', template: register},
// redirect 重定向路由默认位置
{ path: '/', redirect: '/login'}
]
});
- 使用 Vue 实例的 router 属性 来使用路由规则
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
- 使用 router-link 组件 来导航, 使用 router-view 组件来显示匹配到的组件
<!-- 默认渲染为 a 标签 如果需要指定 使用 tag -->
<router-link to="/login" tag="span">登录</router-link>
<touter-link to="/register">注册</touter-link>
<!-- 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>
设置选中路由高亮的两种方式
- router-link 渲染出来的属性默认 带有
router-link-active
类名, 可以通过该类名设置路由样式 - 可以在 router 实例中 通过
linkActiveClass
属性 自定义类名 来进行全局配置
.router-link-active, myActive {
color: 'red';
}
var router = new VueRouter({
routers: [],
linkActiveClass: 'myActive'
});
路由中使用动画
只需要将 Vue 中提供的 transition
标签 包裹住 router-view
标签, 在设置样式即可
.v-enter,
.v-leave-to {
opacity: 0;
transform: translate(80px, 0);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
<transition name="" mode="out-in">
<router-view></router-view>
</transition>
路由中传参的两种方式
<div id="app">
<router-link to="/login/1/zs"></router-link>
<router-link to="/register?id=1&name=zs"></router-link>
<router-view></router-view>
</div>
var login = Vue.extend({
// 1. 通过 params 属性来取值
template: '<h1>login -- {{ $route.params.id }} -- {{ $route.params.name }}</h1>'
});
var register = Vue.extend({
// 2. 通过 query 属性来取值
template: '<h1>register -- {{ $route.query.id }} -- {{ $route.query.name }}</h1>'
});
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', template: login },
{ path: '/register', template: register }
],
});
var vm = new Vue({
el: '#app',
router: router
});
路由的嵌套
<div id="app">
<router-link to="/parent">Parent</router-link>
<router-view></router-view>
</div>
<template id="tmp">
<div>
<h1>这是 parent 组件</h1>
<router-link to="/parent/child1"></router-link>
<router-link to="/parent/child2"></router-link>
<!-- 一层萝卜一个坑??? -->
<router-view></router-view>
</div>
</template>
var child1 = { template: '<h3>child 1</h3>'};
var child2 = { template: '<h3>child 2</h3>'};
var parent = { template: '#tmp' };
var router = new VueRouter({
routes: [{
path: '/parent',
component: parent,
children: [
// 注意: 以 / 开头的嵌套路径会被当做根路径, 慎用
{ path: 'child1', component: child1 },
{ path: 'child2', component: child2 }
]
}]
});
var vm = new Vue({
el: '#app',
router: router
});
命名视图
<div id="app">
<!-- 一个视图需要一个组件渲染, 因此同个路由多个视图,就需要多个组件 -->
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
var header = { template: '<h3>header</h3>' };
var left = { template: '<h3>left</h3>' };
var main = { template: '<h3>main</h3>' };
var router = new VueRouter({
routes: [
{ path: '/', components: { default: header, left, main }}
]
});
var vm = new Vue({
router
}).$mount('#app');
watch 属性的使用
案例1: 监听 data 中属性的改变
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<span>{{ fullName }}</span>
</div>
var vm = new Vue({
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: {
// 接受两个参数 一个新的值, 一个更改之前的旧值
firstName: function (newVal, oldVal) {
this.fullName = newVal + this.lastName;
},
lastName: function (newVal, oldVal) {
this.fullName = this.firstName + newVal;
}
}
}).$mount('#app');
案例2: 监听路由对象的改变
var vm = new Vue({
watch: {
'$route.path': function (newVal, oldVal) {
if (newVal === '/login') {
console.log('welcome to login');
} else if (newVal === '/register') {
console.log('welcome to register');
}
}
}
}).$mount('#app');
computed 计算属性使用
var vm = new Vue({
data: {
firstName: '',
lastName: '',
},
computed: { // 在computed中可以定义一些属性, 这些属性 叫做计算属性 本质: 一个方法, 只不过在使用的时候 是把他们的名称直接当做属性来使用的, 并不会当做方法来用
fullName: function () {
/**
* 注意:
* 1. 计算属性在引用的时候, 一定不要加 () 去调用, 直接把它当做普通的属性就好
* 2. 只要计算属性 这个 function 内部, 所用到的任何 data 中数据发生了变化, 就会立即重新 * 计算 这个计算属性的值
* 3. 计算属性的求值结果, 会被缓存起来, 方便下次使用; 如果计算属性方法中所有的数据没有发 * 生任何任何变化, 则不会重新计算
*/
return this.firstName + this.lastName;
}
}
}).$mount('#app');
watch、computed 和 methods 之间的对比
computed
属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要当做属性来使用;methods
方法表示一个具体的操作, 主要书写业务逻辑;watch
一个对象, 键是需要观察的表达式, 值是对应的回调函数, 主要用来监听某些特性数据的变化, 从而进行某些业务逻辑操作; 可以看做是computed
和methods
的结合体;