What is the difference between `path` and `fullPath` in VueJS router?

Viewed 15691

In my router.js file, when I'm using the beforeEach method, I get path and fullPath in the properties of to and from parameters. I'm wondering which one I should use for redirection purpose. I've seen both been used and I don't when to use which, and what is the difference between both.

An exemple:

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()
            }
        },
    }]
})
2 Answers

From the Vue API Reference:

  • $route.fullPath
    • type: string
      The full resolved URL including query and hash.
  • $route.path
    • type: string
      A string that equals the path of the current route, always resolved as an absolute path. e.g. "/foo/bar".

path: A string that is equal to the path of the current route, always resolved as an absolute path. Example: /user/11/posts, /user/37/posts

fullPath: The complete URL, including query and hash.

Others...

params: An object that contains key / value pairs of segments. query: An object that contains key / value pairs of the url value string. For example, for / foo? user = 1, we have $ route.query.user == 1. hash: The hash of the current path (without #), if one exists. If no hash is present, value will be a string empty. matched: An Array containing route records for all nested path segments of the current route. The route records are the copies of the objects in the route configuration. name: The name of the current route, if one exists.

Related