使用 Vue-router,使用命名路由比直接使用路径有什么优势吗?
Using Vue-router, is there any advantage of using named routes than just using the path directly?
Sometimes it is more convenient to identify a route with a name,
especially when linking to a route or performing navigations.
那么,怎样才能更方便呢?
<router-link :to="{ name: 'user', params: { id: user.id }}">
{{ user.name }}
</router-link>
对
<router-link :to="'/user/' + user.id">
{{ User.name }}
</router-link>
我觉得我遗漏了一些明显的东西。
我总是使用命名路由。
优点是可以改变路由的路径而不需要在每次<router-link>
或this.$router.push()
调用时改变路径。
这有点像在编程中我们避免使用 magic values 而是使用命名常量的原因——我们可以在一个地方更改值,而无需查找并替换所有出现的值在我们的代码中。
如果不使用命名路由,您的代码将与每条路由的路径紧密绑定,您无法在不更改另一条的情况下更改一条。命名路由使我们的代码独立于路由路径——无论路由路径最终是什么,它都会起作用。
另一个优点是我们可以利用 param/query 嵌套路由的继承——我们不需要重建完整路径,相反我们可以只传递子路由的名称,Vue 将构建具有任何现有参数的完整路径。
假设我们有以下路线:
{
name: 'user',
path: '/user/:id',
children: [
{
name: 'profile',
path: 'profile'
}
]
}
当前路由路径为/user/1
。要转到个人资料页面,我们需要执行以下任一操作:
this.$router.push({ name: 'profile' })
或
this.$router.push('/user/' + this.$route.params.id + '/profile')
前者更简单,更不容易出错。
Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations.
那么,怎样才能更方便呢?
<router-link :to="{ name: 'user', params: { id: user.id }}">
{{ user.name }}
</router-link>
对
<router-link :to="'/user/' + user.id">
{{ User.name }}
</router-link>
我觉得我遗漏了一些明显的东西。
我总是使用命名路由。
优点是可以改变路由的路径而不需要在每次<router-link>
或this.$router.push()
调用时改变路径。
这有点像在编程中我们避免使用 magic values 而是使用命名常量的原因——我们可以在一个地方更改值,而无需查找并替换所有出现的值在我们的代码中。
如果不使用命名路由,您的代码将与每条路由的路径紧密绑定,您无法在不更改另一条的情况下更改一条。命名路由使我们的代码独立于路由路径——无论路由路径最终是什么,它都会起作用。
另一个优点是我们可以利用 param/query 嵌套路由的继承——我们不需要重建完整路径,相反我们可以只传递子路由的名称,Vue 将构建具有任何现有参数的完整路径。
假设我们有以下路线:
{
name: 'user',
path: '/user/:id',
children: [
{
name: 'profile',
path: 'profile'
}
]
}
当前路由路径为/user/1
。要转到个人资料页面,我们需要执行以下任一操作:
this.$router.push({ name: 'profile' })
或
this.$router.push('/user/' + this.$route.params.id + '/profile')
前者更简单,更不容易出错。