Vue Router.resolve函数

92 阅读1分钟

Vue Router.resolve(to,currentLocation?)函数是一个静态函数,我们可以直接通过Vue Router引用它。

参数

  • to 要解析的原始路由地址(可以为路径字符串,包含路径信息的对象)(必填)
  • currentLocation 可选的被解析的当前地址(可选)

返回值

一个解析后完整的路径信息对象(路由地址标准化版本)(它包含了路由信息的各种细节,例如路由的路径、路由的组件、路由的参数等等)

const path = {
    "path": "/dashboard",
    "meta": {
        "title": "首页",
        "hidden": false
    },
    "children": [
        {
            "path": "/dashboard",
            "name": "Dashboard",
            "meta": {
                "title": "选择",
                "icon": "home",
                "hidden": false
            }
        }
    ],
    "redirect": "/dashboard"
}

// 以下几个打印结果都是一样的
console.log(router.resolve(path))
console.log(router.resolve({path: '/dashboard'}))
console.log(router.resolve('/dashboard))

// 打印结果
{
    "fullPath": "/dashboard",
    "hash": "",
    "query": {},
    "name": "Dashboard",
    "path": "/dashboard",
    "params": {},
    "matched": [
        {
            "path": "/dashboard",
            "redirect": "/dashboard",
            "meta": {
                "title": "首页",
                "hidden": false
            },
            "props": {
                "default": false
            },
            "children": [
                {
                    "path": "/dashboard",
                    "name": "Dashboard",
                    "meta": {
                        "title": "选择",
                        "icon": "home",
                        "hidden": false
                    }
                }
            ],
            "instances": {},
            "leaveGuards": {},
            "updateGuards": {},
            "enterCallbacks": {},
            "components": {}
        },
        {
            "path": "/dashboard",
            "name": "Dashboard",
            "meta": {
                "title": "选择",
                "icon": "home",
                "hidden": false
            },
            "props": {
                "default": false
            },
            "children": [],
            "instances": {},
            "leaveGuards": {},
            "updateGuards": {},
            "enterCallbacks": {},
            "components": {}
        }
    ],
    "meta": {
        "title": "选择",
        "hidden": false,
        "icon": "home"
    },
    "href": "#/dashboard" // 常用
}

用途

进行路由跳转,通过编程式方式跳转新页面

window.open(Router.resolve(路由信息).href