左小白的技术日常
Github
2020/07/26
Author: guoqzuo

vue-router编程方式跳转路由以及其传参问题

vue-router有以下几种编程方式跳转路由的方法。一般push和repalce用的比较多,下面来看看

router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()

push跳转页面

// 知道路由名称,跳转
this.$router.push({
  name: '路由name',
  params: { userId: '123' } // 参数,url上面不可见
  query: { plan: 'private' } // 查询参数 url上可见
})

// 知道路由path,跳转 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
// 注意:如果提供了 path,params 会被忽略,只能使用query参数

replce跳转页面

push会在history添加一条记录,而replce不会,他只会改变当前页面

// router.replace(location, onComplete?, onAbort?)
this.$router.replace({
  name: '路由name',
  params: { userId: '123' } // 参数,url上面不可见
  query: { plan: 'private' } // 查询参数 url上可见
})

this.$router.resolve()

在新的tab页打开,可以用 this.$router.resolve() 来处理路由信息,也可以直接使用相对路径,注意hash、history跳转方式的区别

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)
window.open('#/user/info') 
// ‘_blank’为默认,在新的窗口打开,'_self' 为在当前页打开