路由跳转传参

router-link跳转

<router-link to="{path:'路由地址'，params:{传的数据}，query：{传的参数}" >
//不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 

注意：router-link中链接如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。

• query ：{传的参数}"
  url后面会拼接参数,类似?id=1，类似get请求传参，也可跟在path后面。
  非重要性的可以这样传, 密码之类的用params，刷新页面id还在
  路由配置 path: “/home/:id” 或者 path: “/home:id”
  不配置path ,第一次可请求,刷新页面id会消失
  配置path,刷新页面id会保留
  目标路由获取方法：this.$route.query.id

• params：{传的参数}"
  不会显示在url上，类似post请求传参，不可跟在path后面
  url后面不会拼接参数 , 但是刷新页面id 会消失
  路由可不配置
  目标路由获取方法：this.$route.params.id

导航跳转

• 在路由内 （路由对象）

router.push({
　　path:'路径',//具有导航功能
　　name：‘路由名称’,//同样具有导航功能
　　params：{传的数据},
　　query：{传的参数}"
});

如：router.push('/login')

• 在组件内 （路由对象）

this.$router.push(参数同上)

不带参数

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

query传参

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

params传参 当push属性里面提供了path属性，会忽略params属性

this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

this.$router.go(n)

this.$router.go(n)

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

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

this.$route与this.$router的区别

• $route为当前router跳转对象里面可以获取name、path、query、params等；
• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法；

前者用于‘获取传递的参数’，后者用于‘路由导航’；

push、replace、go区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)

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

总结

• this,$router.push进行编程式路由跳转
• router-link进行页面按钮式路由跳转
• this.$route.params获取路由传递参数
• this.$route.query获取路由传递参数
• params和query都是传递参数区别在于params不会再url上显示出现，
  并且params参数是路由的一部分，是一定要存在的，否则无法显示视图。
  query则是我们通常看到的url后面跟上的？后跟的显示参数