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'
}



  
    
    联通数据
  

其实在这里使用

同样可以实现页面导航跳转，但是这样的话就不能直接传递params参数了。

• 2.获取组件的name值,以供页面使用

{
  path:'/Yidong',
  component:Yidong,
  name:'我是移动name'
}

当针对不同页面渲染不同菜单并显示菜单名的时候，我们可以把菜单名赋值给路由name，然后进行相应处理。

• 3.同个路由，渲染多个视图
  有时候，我们对于一个路由，采用多个视图来渲染，此时就需要视图name值来进行标记。
  不过此时要注意 在路由对象中要把component 改为components对象。

{
  path:'/Dianxin',
  components:{
    default: DianxinOne, //default 默认的router-view名字
    DianxinTwo: DianxinTwo,
    DianxinThr: DianxinThr
  },
  name:'Dianxin'     
},

   
       //渲染默认DianxinOne组件
       //渲染DianxinTwo组件
       //渲染DianxinThr组件
   

另外vue中name使用和vue-router中name使用没有直接联系，是两个概念。如有疑问请点击 vue中name使用总结,进行查看。

以上就是vue-router中name的使用总结，如有错误，欢迎指正！