vue router中path和name属性使用区别

在使用vue.js搭建项目的时候，一般我们都要使用全家桶中的vue router对项目中页面的路由进行管理。vue router灵活性较高，并且和vue深度融合，使用起来非常方便，也有详细的使用教程。我们在实际使用中，可能会疑惑其中的path和name属性的具体区别以及使用场景。

首先看一下官方文档的使用示例，可以看出在很多情况下path和name可以相互替换使用，从而达到一致的跳转效果。但是，如果仔细观察可以发现代码中间有一句注释比较耐人寻味：如果可能的话，使用 name 和 params 从自动 URL 编码中获益。

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

那么，使用name来从自动URL编码中获益这句话是什么意思呢？简单来说，就是使用name属性可以自动通过某个页面设置的name参数（在router路由表中填写的name参数）来自动寻找到这个页面，而不需要通过在代码中填写出完整路径，我们通过下面的代码来讲解。

const routes = [
  { path: '/kkk/sss/404', name: 'NotFound', component: NotFound },
]

从上面的代码中，我们可以看到声明了一个name为notfound的页面，他的path为/kkk/sss/404,那么如果我们要使用path属性来跳转到这个页面，就必须硬编码写出完整的路径{path:'/kkk/sss/404'}，这在追求动态菜单之类的比较高灵活性的项目中使用的时候就非常不利。而此时我们如果使用name属性，那么直接就可以{name:'NotFound'}，此时vue会自动在路由表中找到notfound这个名称对应的完整路由path，因此我们无需在编程式导航中使用硬编码来指定所需跳转到的页面的所有层级和路径，显得非常人性化。
因为从框架的使用角度来说，开发者更关心的是如何方便跳转到某个页面，而不太想关心该页面的具体路由路径是什么。不过如果要使用name属性来让vue自动寻找路由的话，在配置路由页面信息的时候，一定要给他一个name属性，给他取个名字才能自动找到他。