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

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站制作、建水網(wǎng)絡(luò)推廣、小程序設(shè)計、建水網(wǎng)絡(luò)營銷、建水企業(yè)策劃、建水品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供建水建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：jinyejixie.com

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

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

<script>
 var header={
  template:"<h2>頭部</h2>"
 }
 var leftBox={
  template:"<h2>左側(cè)邊欄</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>

然后 在頁面中使用<router-view>標簽進行展示 在標簽上指定name
若指定了name 那么該<router-view>只能放指定name的組件

<div id="app">
	<!-- 不指定name 則使用默認(default)的組件 -->
	<router-view></router-view>
	<!-- 為<router-view>指定name 該<router-view>只能放指定name的組件 -->
	<router-view name="left"></router-view>
	<router-view name="main"></router-view>
</div>

ps：下面介紹下vue-router的原理

更新視圖但不重新請求頁面，是前端路由原理的核心之一，目前在瀏覽器環(huán)境中這一功能的實現(xiàn)主要有2種方式,Hash模式和History模式：

（1）利用URL中的hash("#");

（2）利用History interface在HTML5中新增的方法;

1、Hash模式： 

      hash（#）是URL 的錨點，代表的是網(wǎng)頁中的一個位置，單單改變#后的部分，瀏覽器只會滾動到相應(yīng)位置，不會重新加載網(wǎng)頁，也就是說 #是用來指導瀏覽器動作的，對服務(wù)器端完全無用，HTTP請求中也不會不包括#；同時每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”后退”按鈕，就可以回到上一個位置；

2、History模式： 

    HTML5 History API提供了一種功能，能讓開發(fā)人員在不刷新整個頁面的情況下修改站點的URL，就是利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面；

通常情況下，我們會選擇使用History模式，原因就是Hash模式下URL帶著‘#'會顯得不美觀；但實際上，這樣選擇一不小心也會出問題；比如：

但當用戶直接在用戶欄輸入地址并帶有參數(shù)時： 
Hash模式：xxx.com/#/id=5 請求地址為 xxx.com,沒有問題; 
History模式: xxx.com/id=5 請求地址為 xxx.com/id=5，如果后端沒有對應(yīng)的路由處理，就會返回404錯誤； 

為解決這一問題，vue-router提供的方法是：

在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。 

給個警告，因為這么做以后，你的服務(wù)器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個 404 頁面?；蛘?，如果你使用 Node.js 服務(wù)器，你可以用服務(wù)端路由匹配到來的 URL，并在沒有匹配到路由的時候返回 404，以實現(xiàn)回退。

以上就是關(guān)于Vue中如何通過vue-router實現(xiàn)命名視圖的內(nèi)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。

網(wǎng)頁標題：Vue中如何通過vue-router實現(xiàn)命名視圖
本文地址：http://jinyejixie.com/article48/gggghp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、定制網(wǎng)站、云服務(wù)器、微信公眾號、建站公司

廣告

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