vue路由跳转的方式

vue路由跳转方式：

1， router-link

不带参数：
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

带参数：
<router-link :to="{name:'home', params: {id:1}}">
html 取参 $route.params.id
js 取参 this.$route.params.id

<router-link :to="{name:'home', query: {id:1}}">
html 取参 $route.query.id
js 取参 this.$route.query.id

2，this.$router.push() 函数里调用

1, 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

2,query 传参
this.$router.push({name:'home',query:{id:1}})
this.$router.push({path:'/home',query:{id:1}})
html 取参 $route.query.id
js 取参 this.$route.query.id 

3,params 传参
this.$router.push({name:'home',params:{id:1}})
html 取参 $route.params.id
js 取参 this.$route.params.id

query 和 params 区别：

1. query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1，刷新页面id还在。 非重要性的可以这样传, 密码之类还是用params。

2. params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。

3. 用query 传递过来的id，在this.$route，上会一直存在。如果一定要用params也可以，在router文件的 path 后面 + “/:id”，这样页面F5刷新后ID还是在router中。

3，this.$router.replace() (用法同上,push)

4, this.$router.go(n)  

向前或者向后跳转n个页面，n可为正整数或负整数

$route 和 $router 的区别：

$route对象表示当前的路由信息，包含了当前URL解析到的信息；包含当前的路径，参数，query对象等；

$router 对象是全局路由的实例，是router构造方法的实例；