在讲vue-Router中name使用之前我们需要先明白几点：
const routes = [{
path:'/Home',
component:HomeCom,
name:'HomeName'
}]
- 在单页面应用中，网页具体路径显示是由vue-router配置中 path决定的，path设置的是什么就显示什么，和name无关。
- 不同路由路径下页面渲染的内容，是根据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>
其实在这里使用
<router-link to="/Liantong">
同样可以实现页面导航跳转，但是这样的话就不能直接传递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使用没有直接联系，是两个概念。如有疑问请点击 vue中name使用总结,进行查看。
以上就是vue-router中name的使用总结，如有错误，欢迎指正！
