脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 命名视图

详解vue 命名视图

 更新时间：2019年08月14日 09:39:51   作者：breathfish  
这篇文章主要介绍了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 命名视图及用法详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 简单的Vue异步组件实例Demo

    简单的Vue异步组件实例Demo

    大家都知道当使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时，下面这篇文章主要给大家介绍了关于如何实现一个简单的Vue异步组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-12-12
  • Vue3 props的使用示例详解

    Vue3 props的使用示例详解

    这篇文章主要介绍了Vue3 props的使用详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-10-10
  • vue中用动态组件实现选项卡切换效果

    vue中用动态组件实现选项卡切换效果

    本篇文章主要介绍了vue中用动态组件实现选项卡切换效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue3如何将通用组件注册成全局组件

    vue3如何将通用组件注册成全局组件

    这篇文章主要介绍了vue3将通用组件注册成全局组件的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue3中使用defineCustomElement 定义组件详解

    Vue3中使用defineCustomElement 定义组件详解

    这篇文章主要为大家介绍了Vue3中使用defineCustomElement 定义组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • Vue前端判断数据对象是否为空的实例

    Vue前端判断数据对象是否为空的实例

    这篇文章主要介绍了Vue前端判断数据对象是否为空的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3 响应式 API 及 reactive 和 ref 的用法示例详解

    Vue3 响应式 API 及 reactive 和 ref&

    响应式是一种允许以声明式的方式去适应变化的编程范例，这篇文章主要介绍了关于Vue3响应式API及reactive和ref的用法,需要的朋友可以参考下
    2023-06-06
  • vue3使用xgPalyer实现截图功能的方法详解

    vue3使用xgPalyer实现截图功能的方法详解

    这篇文章主要为大家详细介绍了如何在vue3中使用xgPalyer截图功能,以及自定义插件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 基于vue2.0实现的级联选择器

    基于vue2.0实现的级联选择器

    这篇文章主要介绍了基于vue2.0实现的级联选择器，基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联，有兴趣可以了解一下
    2017-06-06
  • vue实现axios图片上传功能

    vue实现axios图片上传功能

    这篇文章主要为大家详细介绍了vue实现axios图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-08-08

最新评论