vue-router
引包vue-router.js
1
2
| <script src="./lib/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
声明一个路由实例
1
2
3
4
5
6
7
8
| <script>
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: 'url', component: 注意这里是组件的原型而不是组件的引用标签}
]
})
</script>
|
在vm中注册
1
2
3
4
5
6
7
8
9
10
| <script>
var vm = new Vue({
el:
data:
methods:
filters:
direvtives:
router: router
})
</script>
|
在页面中使用
1
2
3
4
5
6
| <div id="app">
<router-link to="/login" tag="span">登录</router-link>
<router-view></router-view>
</div>
|
给linkActiveClass自定义样式实现高亮显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <style>
.myStyle {
}
</style>
<script>
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: 'url', component: 注意这里是组件的原型而不是组件的引用标签}
],
linkActiveClass: 'myStyle'
})
</script>
|
query查询的方式传值，在对应的组件中就可以拿到值this.$route.query.id
1
2
3
4
5
6
| <div id="app">
<router-link to="/login?id=123" tag="span">登录</router-link>
<router-view></router-view>
</div>
|
params方式传值
1
2
3
4
5
6
7
8
9
10
| <script>
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: 'url', component: 注意这里是组件的原型而不是组件的引用标签},
{path: '/login/:id/:name', component: login}
],
linkActiveClass: 'myStyle'
})
</script>
|
传值：(通过this.$route.params.id this.$route.params.name拿到)
1
2
3
4
5
6
| <div id="app">
<router-link to="/login/123/zhangsan" tag="span">登录</router-link>
<router-view></router-view>
</div>
|
路由的嵌套（children）
使用命名视图实现经典布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
<script>
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': left,
'main': main
}},
})
</script>
|
watch 用来监听data中值的改变（优势在于可以监听非DOM元素的改变）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script>
var vm = new Vue({
el:
data: {
msg: 123
}
methods:
filters:
direvtives:
router:
watch: {
msg: function (newVal, oldVal) {
}
}
})
</script>
|
比如: 监听路由改变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
var vm = new Vue({
el:
data: {
msg: 123
}
methods:
filters:
direvtives:
router:
watch: {
'$route.path': function (newVal, oldVal) {
if (newVal === '/login') {
console.log('欢迎进入登录页面')
}
}
}
})
</script>
|
computed计算属性
- computed里声明的是函数，但我们把它当作属性来用（v-model=””）
- 声明的函数所用到的值一旦变化就会重新计算
- 求值的结果会被缓存起来，方便下次使用，声明的函数所用到的值不变就不会重新计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
var vm = new Vue({
el:
data: {
msg1: 123,
msg2: 456
}
methods:
filters:
direvtives:
router:
watch: {},
computed: {
'result': function () {
return this.msg1 + this.msg2
}
}
})
</script>
|
computed、methods、watch对比
- computed 虽然是函数但被当作属性来使用，属性的结果会被缓存，主要用于对数据的处理后得到一个结果
- methods 表示一个具体的操作，主要用来书写业务逻辑
- watch 键是需要观察的东西，值是键改变之后的回调函数，用于监听特定的数据变化，仿佛是computed和methods的结合
