关于多个router-view视图组件,渲染同一页面
vue.js多视图的使用,可以提高网页组件化,模块化比如使用多视图,可以将网站页面封装header、footer、navbar等公共部分,遇到修改公共部分的文案信息等数据的时候,不再需要逐一修改每个页面;只需要修改各个不同文件引用的唯一对应的相同视图文件即可完成所有不同页面效果的自动同步更新,从而更便捷,更省时,更省力地去管理网站的不同部分。...
·
文章目录
vue.js多视图的使用,可以提高网页组件化,模块化
- 比如使用多视图,可以将
网站页面
封装header
、footer
、navbar
等多个公共部分
,- 遇到修改公共部分的文案信息等数据的时候,不再需要逐一修改每个页面;只需要修改各个不同文件引用的唯一对应的视图文件即可完成所有效果的自动更新,
- 更便捷,更省时,更省力地去管理网站的不同版块。
总结说明:
- 以前可以一次性放一个坑对应一个路由和显示一个组件
a. 一次行为 = 一个坑 + 一个路由 + 一个组件
b. 一次行为 = 多个坑 + 一个路由 + 多个组件 components
多视图 是一个对象,对象内多个key
和value
a.key
对应视图的name
属性
b.value
就是要显示的组件对象- 多个视图(name属性省略与否)
省略:<router-view></router-view>
——name
就是default
不省略:<router-view name='xxx'></router-view>
——name
就是xxx
效果图预览:
相关文件代码如下:
1. main.js文件
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体(页面初始化显示)
import App from './components/app.vue';
//一个个link对象 - 分类
import Header from './components/header.vue';
import Footer from './components/footer.vue';
/*
//注册全局头部、底部组件
Vue.component('headerVue',Header);
Vue.component('footerVue',Footer);
*/
//安装插件
Vue.use(VueRouter);//挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
//routes
routes: [
//一个个link对象
{
path: '/',
components: { // key => value
header: Header,
default: Footer, //默认省略不写name的情况
footer: Footer
}
}
]
});
// new Vue 启动
new Vue({
el: '#app',
render: c => c(App),
//让vue知道我们的路由规则
router:router,//可以简写为router
})
2. app.vue文件
<template>
<div>
<header-vue></header-vue>
<hr />
<!--留坑,非常重要-->
<router-view class="main" name="header"></router-view>
<router-view class="main"></router-view><!--name省略表示name='default'-->
<router-view class="main" name="footer"></router-view>
<hr />
<footer-vue></footer-vue>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
.main{height: 100px;}
</style>
3. header.vue文件
<template>
<div>
我是头部
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
</style>
4. footer.vue文件
<template>
<div>
我是底部
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
</style>
以上就是关于“vue.js多视图的使用”的相关简述,可作为demo演示学习和了解。
更多推荐
已为社区贡献51条内容
所有评论(0)