【Vue】router 路由方法

推送 push

• 通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。
• 语法：

// 参数：要导航到的路由地址
push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>

• 基本用法：

// 这三种形式是等价的
router.push('/users/posva#bio')
router.push({ path: '/users/posva', hash: '#bio' })
router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' })
// 只改变 hash
router.push({ hash: '#bio' })
// 只改变 query
router.push({ query: { page: '2' } })
// 只改变 param
router.push({ params: { username: 'jolyne' } })

替换 replace

• 通过替换历史堆栈中的当前 entry，以编程方式导航到一个新的 URL。
• 语法：与push基本一致

// 参数：要导航到的路由地址
replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>

• 基本用法：

// 当前url地址：http://localhost:3002/data-map/main-home
this.$router.replace({ query: { page: '2' } })
// 当前url地址：http://localhost:3002/data-map/main-home?page=2
// 此时回退url地址是不改变的，因为相当于之前的url那条记录被删掉了，所以退回不到之前的url地址

解析 resolve

• 返回路由地址的标准化版本。还包括一个包含任何现有 base 的 href 属性。
• 语法：与push基本一致

// 参数：要解析的原始路由地址
resolve(to: RouteLocationRaw): RouteLocation & {
  href: string
}

• 基本用法：

// 当前url地址：http://localhost:3002/data-map/main-home
const routeData = this.$router.resolve(`/users/posva#bio`)
console.log("routeData",routeData)
window.open(routeData.href, '_blank');
// 跳转后的url地址：http://localhost:3002/data-map/users/posva#bio

• 打印结果：
  

跳转 go、back、forward

• back：如果可能的话，通过调用 history.back() 回溯历史。相当于 router.go(-1)

// 上条url地址：http://localhost:3002/data-map/main-home
// 当前url地址：http://localhost:3002/data-map/main-home?page=3
this.$router.back();	// 回退到上一条记录
// 当前url地址：http://localhost:3002/data-map/main-home

• forward：如果可能的话，通过调用 history.forward() 在历史中前进。相当于 router.go(1)

// 当前url地址：http://localhost:3002/data-map/main-home
// 下条url地址：http://localhost:3002/data-map/main-home?page=3
this.$router.forward();	// 回退到上一条记录
// 当前url地址：http://localhost:3002/data-map/main-home?page=3

• go：允许你在历史中前进或后退，参数为number，相对于当前页面，你要移动到的历史位置

// 相当于执行 forward 两次
this.$router.go(2)	
// 相当于执行 back 两次
this.$router.go(-2)