vue-Router中name的使用

在講vue-Router中name使用之前我們需要先明白幾點：

const routes = [{
  path:'/Home',
  component:HomeCom,
  name:'HomeName'
}]

1、在單頁面應用中，網頁具體路徑顯示是由vue-router配置中 path決定的，path設定的是什麼就顯示什麼，和name無關。
2、不同路由路徑下頁面渲染的內容，是根據component所對應的元件來進行渲染的，和name無關。

其實name就相當於給你的path取個別名，方便使用，路由並不是一定要設定name值。（如果不設定name，vue-router預設name值為 default）

注意：當我們使用params傳參時，在路由裡一定也要使用 ：來匹配對應引數，不然在重新整理頁面的時候引數將會丟失。

常見的幾種用途

1.指定頁面路由，並傳遞引數

<!-- 路由程式碼配置 -->
{
  path:'/Liantong/:id',
  component:Liantong,
  name:'LiantongName'
}

<!-- 頁面導航跳轉 -->
<router-link :to="{name:'LiantongName',params:{id:100}}">
  <el-menu-item index="/Liantong">
    <i class="el-icon-menu"></i>
    <span slot="title">聯通資料</span>
  </el-menu-item>
</router-link>

其實在這裡使用

同樣可以實現頁面導航跳轉，但是這樣的話就不能直接傳遞params引數了。

2.獲取元件的name值,以供頁面使用

<!-- 路由程式碼配置 -->
{
  path:'/Yidong',
  component:Yidong,
  name:'我是移動name'
}

<!-- 頁面渲染 -->
<template>
  <div class='container'>
    <h3>{{$route.name}}</h3>
  </div>
</template>

當針對不同頁面渲染不同選單並顯示選單名的時候，我們可以把選單名賦值給路由name，然後進行相應處理。

3.同個路由，渲染多個檢視

有時候，我們對於一個路由，採用多個檢視來渲染，此時就需要檢視name值來進行標記。
不過此時要注意 在路由物件中要把component 改為components物件。

<!-- 路由程式碼配置 -->
{
  path:'/Dianxin',
  components:{
    default: DianxinOne, //default 預設的router-view名字
    DianxinTwo: DianxinTwo,
    DianxinThr: DianxinThr
  },
  name:'Dianxin'     
},
<div>
   <el-main>
      <router-view></router-view> //渲染預設DianxinOne元件
      <router-view name="DianxinTwo"></router-view> //渲染DianxinTwo元件
      <router-view name="DianxinThr"></router-view> //渲染DianxinThr元件
   </el-main>
</div>

另外vue中name使用和vue-router中name使用沒有直接聯絡，是兩個概念。