先糾正一下，這個問題的標(biāo)題和內(nèi)容不是一個問題，這里應(yīng)該是涉及到兩個知識點(diǎn)：

• 組件的 name
• 路由的 name

下面我分別解釋一下。

組件的 name

參考鏈接：https://router.vuejs.org/zh/guide/essentials/named-routes.html

組件的 name 是組件對象中的一個配置選項(xiàng)，類似于下面這樣：

export default {name: 'App',data () {return {}},methods: {},... }

允許組件模板遞歸地調(diào)用自身。注意，組件在全局用 Vue.component() 注冊時，全局 ID 自動作為組件的 name。

指定 name 選項(xiàng)的另一個好處是便于調(diào)試。有名字的組件有更友好的警告信息。另外，當(dāng)在有 vue-devtools，未命名組件將顯示成 <AnonymousComponent>，這很沒有語義。通過提供 name 選項(xiàng)，可以獲得更有語義信息的組件樹。

路由的 name

參考鏈接：https://router.vuejs.org/zh/guide/essentials/named-routes.html

路由的 name 是路由對象中的一個配置選項(xiàng)，類似于下面這樣：

const router = new VueRouter({routes: [{path: 'foo',name: 'foo'component: Foo}] })

假設(shè)我們有一個動態(tài)路由：

const router = new VueRouter({routes: [{path: '/user/:userId',component: User}] })

如果你要使用 JavaScript 跳轉(zhuǎn)到這個動態(tài)路由，則你需要這樣寫：

this.$router.push('/user/' + 用戶ID)

如果是在模板中進(jìn)行路由導(dǎo)航，那就是這樣的：

<router-link :to="'/user' + 用戶ID">User</router-link>

以上的方式雖然簡單粗暴，但是通過拼接字符串得到完整路由路徑進(jìn)行導(dǎo)航不太直觀。

所以更好的方式就是給路由配置對象起一個名字，就像下面這樣，這個 name 和 path 沒有任何關(guān)系，它就是一個代號，需要注意的是路由的 name 不能重復(fù)。

const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}] })

現(xiàn)在你可以這樣處理路由導(dǎo)航：

router.push({ name: 'user', params: { userId: 123 }}) <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

所以結(jié)論就是：無論是否需要使用路由的 name，都建議給它寫上，當(dāng)你需要的時候就非常有用了，這是一個建議的做法。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的前端学习（2411）：name属性的作用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。