詳解vue 命名視圖
在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)展示不同的視圖
以上所述是小編給大家介紹的vue 命名視圖及用法詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下2022-06-06
關(guān)于vue-router路徑計(jì)算問(wèn)題
這篇文章主要介紹了關(guān)于vue-router路徑計(jì)算問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Vue.set與this.$set的用法與使用場(chǎng)景介紹
Vue.set()和this.$set()這兩個(gè)api的實(shí)現(xiàn)原理基本一模一樣,都是使用了set函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue.set與this.$set的用法與使用場(chǎng)景,需要的朋友可以參考下2022-03-03
Vue+Element-ui彈窗?this.$alert?is?not?a?function問(wèn)題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue+Mockjs模擬curd接口請(qǐng)求的示例詳解
這篇文章主要介紹了Vue+Mockjs模擬curd接口請(qǐng)求的示例詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
本篇文章主要介紹了VUE餓了么樹(shù)形控件添加增刪改功能的示例代碼，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-10-10
Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
我們?cè)谇岸碎_(kāi)發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
vue元素實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03