前端学习（2411）：name属性的作用

先纠正一下，这个问题的标题和内容不是一个问题，这里应该是涉及到两个知识点：

组件的 name路由的 name

下面我分别解释一下。

组件的 name

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

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

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

允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

路由的 name

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

路由的 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('/user/' + 用户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，都建议给它写上，当你需要的时候就非常有用了，这是一个建议的做法。