vue router编程式导航$router.push()和$router.go()

一: 通常我们跳转页面有两种方式

1. a链接进行跳转,标签跳转.
2. window.location.href,编程式导航(通过写js跳转页面的叫编程式导航)

二: 简单介绍

• 在Vue中我们通常使用router-link来跳转,router-link默认会渲染成a标签.相当于标签跳转.如果想用编程式导航,用window.location.href吗?vue不提倡操作dom或bom所以并不建议这么做.
• Vue router提供了编程式导航router,这里我就叫路由导航了.Vue实例上有$route和$router两个属性:
  $route是路由参数对象,所有路由中的参数,params和query都属于它
  $router是路由导航对象,通过使用js代码,实现路由跳转到新页面/前进/后退.

三: $router.push()和$router.go()

• $router.push()介绍
  该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

//在组件中使用时
// 字符串 '/home'表路径
this.$router.push('/home')

// 对象 path:'/home'表路径
this.$router.push({ path: '/home' })

// 命名的路由
this.$router.push({ name: '/user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
this.$router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
this.$router.push({ path: '/user', params: { userId }}) // -> /user

综上:当用params方式时,不能传path,而应传name

然而这里的name是哪里来的,代表什么?

{path:'/home/photo',component:photo,name:'photo'},

在写路由规则时 还有一个name参数,代表此路由规则的名字,需要先在路由规则中定义,然后使用时传参对应名字,通过这个名字代表我要跳转到path这里面去

• $router.go()介绍
  这个方法的参数是一个整数，通常用它返回或前进
  例子

// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)

// 后退一步记录，等同于 history.back()
this.$router.go(-1)

// 前进 3 步记录
this.$router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)

完结.本文部分内容参考官方文档https://router.vuejs.org/zh/guide/essentials/navigation.html
若发现我有写错的地方,还请指出,共同进步,谢谢.