vue-router传递参数的三种方式

Get方式

• 传递页面

  <router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}"></router-link>
  
  <router-link :to="{name:'test',query: { userId: 123,userName:'xia' }}"></router-link>
  

• 接收页面

  this.$route.query.userId  // 123
  this.$route.query.userName  // xia
  

url: http://localhost:8080/test?userId=123&userName=xia

这种方式传递参数，页面刷新后值不会消失

Post方式

• 传递页面

  <router-link :to="{name:'test',params: { userId: 123,userName:'xia' }}"></router-link>
  

• 接收页面

  this.$route.params.userId  // 123
  this.$route.params.userName  // xia
  

url: http://localhost:8080/test

这种方式传递参数，页面刷新后会消失

路由方法

• router.js

  
  // router.js
  {
      path: '/test/:userId/:userName?', //?问号的意思是该参数不是必传项
      name: 'test',
      component: 'test.vue',
      props: true,
  },
  

• 传递页面

  <router-link to="/test/123/xia"></router-link>
  

• 接收页面

  this.$route.params.userId  // 123
  this.$route.params.userName  // xia
  

url: http://localhost:8080/test/123/xia

这种方式传递参数，页面刷新后不会消失

$router和$route

• $router: 指整个路由实例，可以操控整个路由，基本用法:

  1. this.$router.go(-1); // 向前或者向后跳转n个页面，n可为正整数或负整数
  2. this.$router.push('/'); // 跳转到指定url路径，history栈中会有记录，点击返回会跳转到上个页面
  3. this.$router.replace('/'); // 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

• $route: 指当前路由实例$router跳转到的路由对象，父子关系，基本用法:

  1. this.$route.params.userId
  2. this.$route.query.userName