快捷導(dǎo)航

Vue中通過(guò)vue-router實(shí)現(xiàn)命名視圖的問(wèn)題

更新時(shí)間：2020年04月23日 10:54:59 作者：Piconjo_Official

這篇文章主要介紹了在Vue中通過(guò)vue-router實(shí)現(xiàn)命名視圖,本文給大家提到了vue-router的原理解析，給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

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

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

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

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

然后在頁(yè)面中使用<router-view>標(biāo)簽進(jìn)行展示在標(biāo)簽上指定name
若指定了name 那么該<router-view>只能放指定name的組件

<div id="app">
	<!-- 不指定name 則使用默認(rèn)(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的原理

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

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

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

1、Hash模式：

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

2、History模式：

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

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

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

為解決這一問(wèn)題，vue-router提供的方法是：

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

給個(gè)警告，因?yàn)檫@么做以后，你的服務(wù)器就不再返回 404 錯(cuò)誤頁(yè)面，因?yàn)閷?duì)于所有路徑都會(huì)返回 index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個(gè) 404 頁(yè)面?；蛘撸绻闶褂?Node.js 服務(wù)器，你可以用服務(wù)端路由匹配到來(lái)的 URL，并在沒有匹配到路由的時(shí)候返回 404，以實(shí)現(xiàn)回退。

到此這篇關(guān)于Vue中通過(guò)vue-router實(shí)現(xiàn)命名視圖的問(wèn)題的文章就介紹到這了,更多相關(guān)vue vue-router命名視圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: