vue路由跳转传参-知识网络总结

<router-link to=’/login’>点击跳转路由</router-link>

这个是类似与超链接点击跳转，<a>类似这种,当然大部分都是点击按钮等来函数跳转。

路由跳转有四种

• $router.go(n) 这个方法的参数是一个整数，意思是在 history
  记录中向前或者后退多少步，类window.history.go(n)

• $router.back(n) 这是只是后退，不刷新，保留表单中的内容。go（-1）是后退+刷新

• $router.push(‘/xxx’) 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history
  栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

• $router.replace(‘/xxx’) 跟 router.push 很像，唯一的不同就是，它不会向 history
  添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

路由传参有三种(params好看、query难看)

1、param传参，可url中会显示参数，需改更改一下路由一点代码，
eg: www.baidu.com/login/173541

this.$router.push(‘/xxx/xxx/’+id)

使用：this.$route.params.id

2、param传参，可不显示参数，页面刷新参数会丢失
eg: www.baidu.com/login

this.$router.push({      //记得是router，接收参数才是route
	name：‘xxxx’,        //只能用name,不能用path
	params:{ id:1 }
})

使用：this.$route.params.id

3、query传参，url显示参数，小缺点是在?id=1，不美观
eg: www.baidu.com/login/?id=173541

this.$router.push({      //记得是router，接收参数才是route
	name：‘xxxx’,        
	query:{ id:1 }
})

使用：this.$route.query.id

4、当然这样没毛病，最好都是统一用name好点

this.$router.push({ path: '/active/census' });