先纠正一下,这个问题的标题和内容不是一个问题,这里应该是涉及到两个知识点:
- 组件的 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,都建议给它写上,当你需要的时候就非常有用了,这是一个建议的做法。