VueJS路由器中的`path`和`fullPath`有什么区别？答案

【问题标题】：What is the difference between `path` and `fullPath` in VueJS router?VueJS路由器中的`path`和`fullPath`有什么区别？
【发布时间】：2019-04-16 03:14:48
【问题描述】：

在我的router.js 文件中，当我使用beforeEach 方法时，我在to 和from 参数的属性中得到path 和fullPath。我想知道应该使用哪一个来进行重定向。我见过两者都用过，不知道什么时候用哪个，两者有什么区别。

一个例子：

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
        path: 'login'
        beforeEnter: (to, from, next) => {
            console.log(to, from) // the routes
            if (User.loggedIn()) {
                next(from.fullPath) // or maybe `from.path`
            } else {
                next()
            }
        },
    }]
})

【问题讨论】：

$route.fullPath ：完整解析的 URL，包括查询和哈希。 $route.path：等于当前路由路径的字符串，始终解析为绝对路径。例如“/foo/bar”。

标签： javascript vuejs2 vue-router

【解决方案1】：

来自Vue API Reference：

$route.fullPath

输入：string
完整解析的 URL，包括查询和哈希。

$route.path

输入：string
等于当前路由路径的字符串，始终解析为绝对路径。例如“/foo/bar”。

【讨论】：

【解决方案2】：

path：一个字符串，等于当前路由的路径，始终解析为绝对路径。示例：/user/11/posts、/user/37/posts

fullPath：完整的 URL，包括查询和哈希。

其他...

params：一个包含键/值对的对象段。查询：一个包含键/值对的对象 url 值字符串。例如，对于 / 富？用户 = 1，我们有 $ route.query.user == 1。 hash：当前路径的哈希值（不带#），如果存在的话。如果不存在哈希，值将是一个字符串空的。匹配：一个包含所有路由记录的数组当前路线的嵌套路径段。这路由记录是对象的副本路由配置。 name：当前路由的名称，如果存在的话。

【讨论】：