vue组件name的作用和路由name的作用

组件的作用：

• 指定name选项的另外一个好处是便于调试
• 有名字的组件有更友好的组件信息
• 另外当在有vue-devtools,未命名组件将显示<AnonymousComponent>,这种很没有语义, 通过提供name 选项,可以获得更有语义信息的组件树
• 所以给组件起一个名字是非常有必要的,尽量不要让组件的名字重复

vue路由name的作用：

• 路由的name是路由对象中的一个配置选项，类似于下面这样的：

const router = new VueRouter({
  routes:[
      {
       path:"foo",
       name:"foo",
       component:foo
    }
]
})
 
假如我们有个动态路由:
const router = new VueRouter({
  routes:[
      {
       path:"/user/:userId",
       component:User
    }
]
})
如果你要使用JavaScript跳转到这个动态路由,则需要这样写:
this.$router.push ("/uese" + 用户ID)
如果在模板中进行路由导航的话 那就要写成这样:
<router-link :to="user"+用户ID>User</router-link>
以上的方式虽然简答粗暴,但是通过拼接字符串得到完整的路由进行导航太不直观了 
 
所以更好的方式是给路由配置对象起一个名字, 这个name和path没有任何关系,他就是一个代号,需要注意的就是name不能重复
const router = new VueRouter({
  routes:[
      {
       path:"/user/:userId",
       name:"user",
       component:User
    }
]
})
现在你可以这样处理路由导航:
router.push({ name:"user" , params:{ userId:123 }})
<router-link :to=" { name:"user" , params:{ userId:123 }} ">User</router-link>
 
总结:无论是否需要使用路由的name,都建议给他写上,当你需要的时候就非常有用了,这是一个建议做法

作者：Eliauk519
链接：https://www.jianshu.com/p/51e5b0cd0cb5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。