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

Question

根据official docs

  

有时候，使用名称来标识路线更为方便，   尤其是链接到路线或执行导航时。

那么，这怎么会更方便？

<router-link :to="{ name: 'user', params: { id: user.id }}">
   {{ user.name }}
</router-link>

vs

<router-link :to="'/user/' + user.id">
   {{ User.name }}
</router-link>

我觉得我缺少明显的东西。

Answer 1

我总是使用命名路由。

优点是您可以更改路由的路径，而无需在每次<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')

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