vue.js - 使用 Vue-router，使用命名路由比直接使用路径有什么优势吗？

Question

根据 official docs

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>

我觉得我遗漏了一些明显的东西。

Answer 1

我总是使用命名路由。

优点是你可以改变路由的路径而不需要在每个<router-link>中改变路径。或 this.$router.push()打电话。

这有点像我们在编程中避免 magic values 的原因。而不是使用命名常量——我们可以在一个地方更改值，而无需在我们的代码中查找和替换所有出现的值。

如果不使用命名路由，您的代码将与每条路由的路径紧密绑定(bind)，您无法更改一条路由而不需要更改另一条路由。命名路由使我们的代码独立于路由路径——无论路由路径最终是什么，它都会起作用。

另一个优点是我们可以利用嵌套路由的参数/查询继承——我们不需要重建完整路径，相反我们可以只传递子路由的名称，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')

前者更简单，更不容易出错。