路由带参，简简单单~

带参数的路由匹配，其需求主要是：当需要将给定匹配模式的路由映射到同一个组件，但是其所需数据的目标用户不同如ID不同，页面参数不同等等时。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，也就是传入路径参数
一、query传递/接收路径参数
1、两种方式
（1）方式一
router.push({
name: 路径别名（如home,about,login）,
query: {
//路径参数的key:路径参数的value，可以传递一个或者多个
username: ‘catt’,
gender:‘male’
}
})
​
（2）方式二
router.push({
path: 路径（如/home,/about,/login）,
query: {
//路径参数的key:路径参数的value，可以传递一个或者多个
username: ‘catt’,
sex:‘female’
}
})

使用path+query和使用name+query的区别在于：通过name方式跳转的页面在刷新之后，参数会失效，而path方式参数不会失效，会被保留。
2、router-link
标签将会呈现一个带有正确 href 属性的 标签。router-link跳转的路径可以不需要在路由处配置。使用router-link组件进行导航，通过to属性来执行链接，还需要一个路由出口，即router-view，路由匹配到的组件都将渲染在这里。
3、router.push()
编程式导航，即router.push(location,onComplete?,onAbort?)，这个方式会向history栈添加一个新的记录，这样的话就会出现回退按钮，可以返回到来时的路径。在vue3中，没有this，所以不能使用this.$route.params，但是可以通过引入useRouter,useRoute来使用，其中，

router是路由操作对象，只写对象，以及跳转参数；route是路由信息对象，只读对象，接收传递的路径参数

其实，router不仅仅只有push方法，还有router.go()，router.replace()。
举例如下：
（1）传递参数
//home页面
<button @click=“toAbout”>Go to AboutView
​

（2）接收参数
//about页面

通过query传递参数，参数一般是以’?‘形式拼接在路径后面，如果参数有多个，则参数与参数之间通过’&'进行拼接。完整路径为：xxxxxxxxxx/about.username?username=catt
传递一个路径参数，如图所示：

传递多个路径参数时。如图所示：

二、params传递/接收路径参数
如果提供了path，patams会被忽略。所以，通过params传递参数，只有一种方式
router.push({
name: 路径别名（如home,about,login）,
params: {
//路径参数的key:路径参数的value，可以传递一个或者多个
username: ‘catt’,
gender:‘male’
}
})
​
其中，路由配置path:“/about/:username"或者path:”/about.username"
在路由中不配置path中的参数username 第一次可请求,刷新页面username会消失
在路由中配置path中的参数username 刷新页面username会保留
1、router-link
router-link中链接如果是’/‘开始，就是从根路由开始，即在路由配置的path;如果开始不带’/‘,则代表的是从当前路由开始，也就是当前路由的子路由，路由的子路由配置中path也不需要’/‘。
举个简单例子: 当前页面所在路由为 /app/home，在设置router-link链接的时候，
{path:‘about’} 跳转后页面所在路由为 /home/about，配置在某个路由的子路由里
{path:’/about’} 跳转后页面所在路由为 /about
2、router.push()
（1）传递参数
//home页面

（2）接收参数

（3）需要路由配合，显示参数
{
path: ‘/about/:username’,
name: ‘about’,
component: () => import(‘…/views/AboutView.vue’)
}

通过params传递参数，如果需要在路径显示参数，则需要路由配合，即把params也当做是路由的参数；否则，不会再路径中显示。完整路径：xxxxxxxxxxxxxxx/about/dogg
传递一个参数时，如图所示：

感兴趣的友友，可以自行测试params不配合路由使用，以及path+params会出现什么结果。
三、总结
query和params传参的区别：
（1）query
使用name+query或者path+query传递路径参数，可以用path或者name两种方式来引入路由。 query是拼接在url后面的参数，没有传参也可以正常显示页面，query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
（2）params
使用name+params传递路径参数，只能用name来引入路由，如果写成了path，或忽略params传递的参数，那么接收参数的页面的结果将会是undefined。 params传参跳转后，接收的参数不显示在路由上，如果刷新页面，参数会消失；但是如果想刷新保留参数，可以通过配合路由使用，将params当成路由的一部分，在路由后面直接添加参数名。params相当于post请求，参数不会在地址栏中显示，只有params和路由结合使用才可以在地址栏看到传递参数。