vue元件name的作用和路由name的作用
阿新 • • 發佈:2022-11-30
元件的作用:
- 指定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
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。