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使用没有直接联系，是两个概念。