這篇文章主要為大家展示了Vue中如何通過vue-router實現(xiàn)命名視圖，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

在孟津等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站制作、做網(wǎng)站 網(wǎng)站設計制作按需求定制網(wǎng)站,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站設計,全網(wǎng)整合營銷推廣,成都外貿網(wǎng)站建設,孟津網(wǎng)站建設費用合理。

在用vue-router路由處理一些需求的時候 例如 有時需要同時同級展示多個組件 而不是嵌套展示
例如：創(chuàng)建一個布局 有側導航和主內容兩個視圖 此時命名視圖就派上用場了

在路由對象中 使用components屬性 以使一個路徑下可掛載多個子組件：
之后即可為每個要展示的組件指定一個名字
默認name為default 即 不設置名字

<script>
 var header={
  template:"<h2>頭部</h2>"
 }
 var leftBox={
  template:"<h2>左側邊欄</h2>"
 }
 var mainBox={
  template:"<h2>主體</h2>"
 }

 // 創(chuàng)建路由對象
 var router=new VueRouter({
  routes:[
   // 使用components屬性 一個路徑下掛載多個子組件
   {path:"/",components:{
    // 默認展示的組件
    "default":header,
    // 為組件命名
    "left":leftBox,
    "main":mainBox
   }}
  ]
 })

 var vm=new Vue({
  el:'#app',
  data:{},
  methods:{},
  // 掛載路由對象
  router
 });
</script>

新聞名稱：Vue中如何通過vue-router實現(xiàn)命名視圖-創(chuàng)新互聯(lián)
本文來源：http://www.chinadenli.net/article42/dhdohc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、營銷型網(wǎng)站建設、網(wǎng)站建設、網(wǎng)站排名、企業(yè)建站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)