1. 程式人生 > 其它 >vue元件name的作用和路由name的作用

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
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。