什么是路由?
- 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
- 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;
- 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)
路由的基本使用
- 引入js文件,这个js需要放在vue的js后面,自动安装(提供了一个VueRouter的构造方法)
- 创建路由new VueRouter(),接受的参数是一个对象
- 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性,path属性是url的地址,component属性就是显示的组件(传组件的对象)
- 创建的路由需要和vue实例关联一下
- 路由到的组件显示在哪个位置
<body>
<div id="app">
<!-- 通过路由切换的组件会被放在这里 -->
<router-view></router-view>
</div>
<script>
const login = {
template: '<h2>登录</h2>'
}
// 这里实例化了一个路由
const router = new VueRouter({
routes: [{
path: '/login',
//这里需要注意的是我们直接组件的对象放在这里
component: login
}]
});
var vm = new Vue({
el: '#app',
// 把路由挂在到实例上
router: router
})
</script>
</body>
路由的跳转
<router-link to='/login'>登录</router-link>
<router-link to='/registry'>注册</router-link>
路由重定向
//重定向
{
path: "/",
redirect: "/home"
},
选中路由高亮
- 使用默认的样式
直接设置router-link-active - 自定义样式
配置 linkActiveClass:‘自定义的类名’
定义参数
- 通过query的方式在url后加?参数名=参数的值
获取参数:$route.query.参数名
定义参数
使用浏览器参数的方式传递参数
设置路由的时候/路由地址/:参数名
获取参数$route.params.参数名
命名视图
- 我们之前只能一个地址对应一个组件,现在可以一个地址对应多个组件
- components属性设置的
- 给router-view设置名字,这个名字和components组件名字是对应的
- 设置默认值default对应组件可以设置名字也可以访问
Wacth用法
监听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>
监听路由对象的改变:
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = Vue.extend({
template: '<h1>登录组件</h1>'
});
var register = Vue.extend({
template: '<h1>注册组件</h1>'
});
var router = new VueRouter({
routes: [
{ path: "/login", component: login },
{ path: "/register", component: register }
]
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router,
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('这是登录组件');
}
}
}
});
</script>
Computed用法
默认只有getter的计算属性:
<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'
},
methods: {},
computed: { // 计算属性; 特点:当计算属性中所以来的任何一个 data 属性改变之后,都会重新触发 本计算属性 的重新计算,从而更新 fullName 的值
fullName() {
return this.firstName + ' - ' + this.lastName;
}
}
});
</script>
定义有getter和setter的计算属性:
<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>
method、computed和watch的区别
- computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加();
- methods方法表示一个具体的操作,主要书写业务逻辑;
- watch一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体