版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/enjoy_sun_moon/article/details/89000150
<router-view name='righjt'></route-view>< route-view name="left"></route-view> 命名视图 ：给router-view加上name 只有name是left的组件能放在这里
用处：当默认的时候能够将几个组件同时显示出来,将一 一对应name的值和下面组件中的
<style>
.header{
background-color: orange;
height: 80px;
}
.container{
display: flex;
height: 600px;
}
.left{
background-color: lightcoral;
flex: 2;
}
.main{
background-color: lightblue;
flex: 8;
}
h1{
margin: 0;
padding: 0;
font-size: 10px;
}
html, body{
margin: 0;
padding: 0;
}
</style>
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name='left'></router-view>
<router-view name='main'></router-view>
</div>
</div>
<script>
var header = {
template: '<h1 class="header">header头部区域</h1>'
}
var leftBox = {
template: '<h1 class="left">Left侧边栏</h1>'
}
var mainBox = {
template: '<h1 class="main">mainBox头部区域</h1>'
}
var router = new VueRouter({
routes: [
/*
{path: '/', component: header},
{path: '/left', component: leftBox},
{path: '/main', component:mainBox},
*/
{path:'/', components: {
'default': header, //header 对应的是上面router-view中的name一一对应填入相应组件
'left': leftBox,
'main': mainBox
}}
]
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
router
})
</script>watch属性：
监听属性变化 如果变化立即执行函数
用途：watch监听路由变化 和 其他一些属性的变化比较方便
watch:{
'$route.path':function(newval,oldval){
console.log(newval)
console.log(oldval)
}
},computed属性
computed: {
/*
在computed中可以定义一些属性，这些属性叫做计算属性， 本质就是一个方法。
只不过我们在使用这些计算属性的时候，只不过我们在使用这些计算属性的时候，
是把他们的名称直接当作属性来用的；并不会把计算属性当作方法去调用
*/
//注意1：计算属性，在引用的时候，一定不加()去调用，直接把它当作普通属性去使用就好了
//注意2：只要计算属性这个function内部所用到的任何data中的数据发生了变化，就会立即重新计算这个属性的值
//注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性方法中，所依赖任何数据都没有发生改变，则不会重新对计算属性求值
'fullName': function(){
console.log('fullName被计算一次')
return this.firstName + '-' + this.lastName
}
},三者相同点 watch 和 computed都对应的是函数
三者区别 computed 一定要return数据，并且数据会被缓存。
watch ： 不用return 直接用this.data修改就行 ，键是你要监听的属性或者表达式，值是对应回调函数，主要用来监听数据变化。
methods更适合写业务逻辑。
扫描二维码关注公众号，回复：
5882256 查看本文章
