使用 Vue-router，使用命名路由比直接使用路径有什么好处吗？答案

【问题标题】：Using Vue-router, is there any advantage of using named routes than just using the path directly?使用 Vue-router，使用命名路由比直接使用路径有什么好处吗？
【发布时间】：2018-09-08 02:40:26
【问题描述】：

根据official docs

有时用名字来识别路线更方便，尤其是在链接到路线或执行导航时。

那么，这样怎样才能更方便呢？

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

对

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

我觉得我错过了一些明显的东西。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

我总是使用命名路由。

优点是可以更改路由的路径，而无需在每次<router-link> 或this.$router.push() 调用中更改路径。

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

如果不使用命名路由，您的代码将与每条路由的路径紧密绑定，您无法更改其中一个而无需更改另一个。命名路由使我们的代码独立于路由路径——无论路由路径最终是什么，它都可以工作。

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

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

【讨论】：

我同意按名称推送子路由非常方便，自动 url 编码也是如此，但是更改路径不是对网站可能做的最糟糕的事情吗？它会伤害 SEO，破坏您的用户/记者/影响者保存/共享的链接，并且通常会使您的服务不那么可靠。为什么有人想让它变得更容易？
即使您以后从不打算更改路径，路径也是您不必在代码库中到处引用的实现细节，尤其是当您需要手动将参数连接到其中时。一个简短的常量唯一名称要简洁得多，并将其留给库来生成完整的 URL。