VUE实现路由带参数匹配
前言
带参数的路由匹配,其需求主要是:当需要将给定匹配模式的路由映射到
同一个
组件,但是其所需数据的目标用户不同如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="xxx"></router-link>
标签将会呈现一个带有正确 href
属性的 <a href="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和路由结合使用才可以在地址栏看到传递参数。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanejgh
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01