您的位置:首页 > Web前端 > Vue.js

详解vue 命名视图

2019-08-14 09:39 543 查看

在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 命名 视图