详解vue 命名视图
在views 创建 UserProfile.vue UserProfilePreview.vue文件
app.vue文件创建两个router-view :
<router-view/> <router-view name="helper"/>
两个router-link
<router-link to="/">Home</router-link> | <router-link to="/profile">profile</router-link>|
在router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import UserProfile from './views/UserProfile.vue'
import UserProfilePreview from './views/UserProfilePreview.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/profile',
name: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}
]
})
当在浏览器窗口访问我们的命名视图时候
<router-view/>和<router-view name="helper"/>分别展示了对应的组件
总结：命名视图优点在于一个页面中相当于多个窗口，这些窗口我们可以根据
<router-link to="/">Home</router-link> | <router-link to="/profile">profile</router-link>|的不同来展示不同的视图
以上所述是小编给大家介绍的vue 命名视图及用法详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
SyntaxError: /xx.vue: Unexpected token, expected “,“错误解
这篇文章主要为大家介绍了SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-08-08
这篇文章主要为大家详细介绍了vue点击按钮实现简单页面的切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了vue 使用 echarts 绘制中国地图,内容包括插入echarts所需模块及完整的代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能，发现网上这方面的资料较少，所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题
这篇文章主要介绍了Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了原理深度解析Vue的响应式更新比React快，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue.js 中使用（...）运算符报错的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vue单向以及双向数据绑定方式(v-bind和v-model的使用)
这篇文章主要介绍了vue单向以及双向数据绑定方式(v-bind和v-model的使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue中UI组件库之Vuex与虚拟服务器初识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue实现生成二维码的简单方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
最新评论