溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Vue.js中單頁面多路由區域操作的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
單頁面多路由區域操作
在一個頁面中有兩個及以上的<router-view>區域，需要通過設置路由的index.js，來操作這些區域的內容
App.vue 中設置：
<router-view></router-view> <router-view name="left" ></router-view> <router-view name="right" ></router-view>
index.js中設置：
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import First1 from '@/components/first1'
import First2 from '@/components/first2'
Vue.use(Router)
export default new Router ({
routes : [
{
path : '/',
name : 'Hello',
components : {
default : Hello,
left : First1,
right : First2
}
}
]
})下面的設置是當url為/#/first 時，交換兩個組件顯示的位置
export default new Router ({
routes : [
{
path : '/',
name : 'Hello',
components : {
default : Hello,
left : First1,
right : First2
}
}, {
path : '/first',
name : 'First',
components : {
default : Hello,
left : First2,
right : First1
}
}
]
})感謝各位的閱讀！關于“Vue.js中單頁面多路由區域操作的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
