编程式的导航

Posted 2020-12-01 hou-yuan-zhen

在Vue中除了router-link,使用a标签的形式来实现跳转，还有一种方式使用window.location.href的形式，叫做编程式导航，就是写js代码跳转。

　　一：router.push()：

　　　　这个方法，和点击<router-link :to="...">是一样的

　　　　1.最简单的：this.$router.push(  ‘/home/newsinfo‘+id  )------>字符串路径

　　　　2.传递对象的：this.$router.push(  {  path:‘/home/newsinfo‘+id  }  )

　　　　3.传递命名路由：this.$router.push(  {name: ‘NewsInfo‘ , params:{  id:  id }})

　　　　4.带查询参数，变成   /newsinfo ?plan=private

　　　　　　this.$router.push(  { path: ‘ newsinfo ‘, query :{ plan: ‘private‘} })

　　二：router.replace():

　　　　它和router.push很像，唯一的不同就是，它不会向history添加新记录，而是跟它的方法名一样----替换掉当前的history记录。

　　　　这个方法和<router-link :to="..."  replace>是一样的；