params和query的区别？（vue）

1.query路由跳转传参。

goAbout () {
	 /*第一种*/
      this.$router.push({
        path: '/about', /*第一种*/
        query: {
          id: 1
        }
      })
       /*第二种*/
       this.$router.push({
        name: 'About', /*第二种*/
        query: {
          id: 1
        }
      })
    },
/ *其他页面接收参数*/
mounted () {
    console.log(this.$route.query.id)
  },

效果：

2.params路由传参

goMy () {
      this.$router.push({
       // path: '/my', /*采用path无法获取到传递的参数*/
        name: 'My',
        params: {
          id: 2
        }
      })
    }
    / *其他页面接收参数*/
mounted () {
    console.log(this.$route.params.id)
  },

当使用path跳转页面时，获取到的id为undefined

当使用name跳转页面时，获取到的id为2

params和query的区别：

1. query在url（地址栏）中显示传递的参数，而params不在url(地址栏)中显示传递的参数。
2. query可以使用path或者name跳转页面,而params使用name跳转页面。

router和route的区别？

$router用来跳转页面并携带参数, route用来接收路由跳转的参数

/*html*/
<!--跳转页面的方法及携带参数的方法-->
<router-link to="/跳转的地址"></router-link>
<router-link to="{
	path: '/跳转的地址',
	query: {
		key(属性)： value（值）， // 例如：id: 1
	}
}"></router-llink>  // 相当于/地址?属性=值 ， 例如：/about?id=1
<router-link to="{
	name: '地址名称',
	params: {
		key(属性)： value（值）， // 例如：id: 1
	}
}"></router-llink> 
/*js*/
methods: {
	方法名 （） {
		/*第一种*/
		this.$router.push('/地址')
		/*第二种query*/
		this.$router.push({
			name: '地址名称', // 或者 path: '/地址'
			query: {
				key(属性)： value（值）， // 例如：id: 1
			}
		})
		/*第三种params*/
		this.$router.push({
			name: '地址名称', 
			params: {
				key(属性)： value（值）， // 例如：id: 1
			}
		})
	}
}
/*其他页面： 接收路由跳转的参数*/
/*html*/
// query
<span>{{ $route.query.id }}</span> 
// params
<span>{{$route.params.id}}</span> 
/*js*/
// query
console.log(this.$route.query.id)
// params
console.log(this.$route.)