带参数的路由匹配
本文正在参加「金石计划 . 瓜分6万现金大奖」
带参数的路由匹配，其需求主要是：当需求将给定匹配方法的路由映射到同一个组件，可是其所需数据的方针用户不同如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
<router-link to="https://juejin.im/post/7165525662269194248/xxx"></router-link>标签将会呈现一个带有正确 href 特点的 <a href="https://juejin.im/post/7165525662269194248/xxx"></a> 标签。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</button>
<script setup lang="ts">
import {
useRouter
} from 'vue-router';
const router = useRouter()
const toAbout = () => {
router.push({
name: 'about',
query: {
username: 'catt'
}
})
}
</script>
（2）接纳参数
//about页面
<script setup lang="ts">
import {
useRoute
} from 'vue-router';
import {
onMounted
} from 'vue';
const route = useRoute()
onMounted(() => {
console.log(route.query);
})
</script>
经过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页面
<script setup lang="ts">
import {
useRouter
} from 'vue-router';
const router = useRouter()
const toAbout = () => {
router.push({
name: 'about',
params: {
username: 'dogg'
}
})
}
</script>
（2）接纳参数
<script setup lang="ts">
import {
useRoute
} from 'vue-router';
import {
onMounted
} from 'vue';
const route = useRoute()
onMounted(() => {
console.log(route.params);
})
</script>
（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和路由结合运用才能够在地址栏看到传递参数。
