在用vue-router路由處理一些需求的時候 例如 有時需要同時同級展示多個元件 而不是巢狀展示
例如：建立一個佈局 有側導航和主內容兩個檢視 此時命名檢視就派上用場了

在路由物件中 使用components屬性 以使一個路徑下可掛載多個子元件：
之後即可為每個要展示的元件指定一個名字
預設name為default 即 不設定名字

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

 // 建立路由物件
 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的原理

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

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

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

1、Hash模式：

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

2、History模式：

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

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

但當用戶直接在使用者欄輸入地址並帶有引數時：
Hash模式：xxx.com/#/id=5 請求地址為 xxx.com,沒有問題;
History模式: xxx.com/id=5 請求地址為 xxx.com/id=5，如果後端沒有對應的路由處理，就會返回404錯誤；

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

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

給個警告，因為這麼做以後，你的伺服器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 檔案。為了避免這種情況，你應該在 Vue 應用裡面覆蓋所有的路由情況，然後在給出一個 404 頁面。或者，如果你使用 Node.js 伺服器，你可以用服務端路由匹配到來的 URL，並在沒有匹配到路由的時候返回 404，以實現回退。

到此這篇關於Vue中通過vue-router實現命名檢視的問題的文章就介紹到這了,更多相關vue vue-router命名檢視內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！