vue中命名視圖的示例分析

這篇文章給大家分享的是有關(guān)vue中命名視圖的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

在views 創(chuàng)建 UserProfile.vue UserProfilePreview.vue文件

app.vue文件創(chuàng)建兩個(gè)router-view :

<router-view/>
<router-view name="helper"/>

兩個(gè)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
 }
}

]

})

當(dāng)在瀏覽器窗口訪問(wèn)我們的命名視圖時(shí)候

<router-view/>和<router-view name="helper"/>分別展示了對(duì)應(yīng)的組件

總結(jié)：命名視圖優(yōu)點(diǎn)在于一個(gè)頁(yè)面中相當(dāng)于多個(gè)窗口，這些窗口我們可以根據(jù)

<router-link to="/">Home</router-link> |
<router-link to="/profile">profile</router-link>|的不同來(lái)展示不同的視圖

感謝各位的閱讀！關(guān)于“vue中命名視圖的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！