詳解vue 命名視圖
更新時間：2019年08月14日 09:39:51 作者：breathfish
這篇文章主要介紹了vue 命名視圖的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
在views 創(chuàng)建 UserProfile.vue UserProfilePreview.vue文件
app.vue文件創(chuàng)建兩個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"/>分別展示了對應的組件
總結：命名視圖優(yōu)點在于一個頁面中相當于多個窗口，這些窗口我們可以根據
<router-link to="/">Home</router-link> | <router-link to="/profile">profile</router-link>|的不同來展示不同的視圖
以上所述是小編給大家介紹的vue 命名視圖及用法詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
Vue使用openlayers實現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細介紹了Vue如何使用openlayers實現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起動手嘗試一下2022-06-06
這篇文章主要介紹了關于vue-router路徑計算問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,都是使用了set函數(shù),下面這篇文章主要給大家介紹了關于Vue.set與this.$set的用法與使用場景,需要的朋友可以參考下2022-03-03
Vue+Element-ui彈窗?this.$alert?is?not?a?function問題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue+Mockjs模擬curd接口請求的示例詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
本篇文章主要介紹了VUE餓了么樹形控件添加增刪改功能的示例代碼，非常具有實用價值，有興趣的可以了解一下2017-10-10
Antd的Table組件嵌套Table以及選擇框聯(lián)動操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
我們在前端開發(fā)中經?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到:visible.sync，今天小編帶領大家學習下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了vue元素實現(xiàn)動畫過渡效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了Vue.js事件處理器與表單控件綁定詳解的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03