欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue 命名視圖

 更新時(shí)間：2019年08月14日 09:39:51   作者：breathfish  
這篇文章主要介紹了vue 命名視圖的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在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)在瀏覽器窗口訪問我們的命名視圖時(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)展示不同的視圖

以上所述是小編給大家介紹的vue 命名視圖及用法詳解,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論