您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— Vue动态路由

《和小米一起学Vue.js》— Vue动态路由

[ 孤狼 | 2023-01-09 11:07:42 | Vue | 927°C | 0条评论 ]

很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数 。

const routes = [
{
path: '/user/:uid', //对应的网址路径
name: 'user', //对应的路由名称
component: UserView //对应的组件名称,在上方静态导入
}
]

像上面这样,使用一个 “:uid” 来接收变量,使得类似于 “/user/11”“/user/32” 这样的网址都可以跳转到 user 。

当使用路径参数匹配的时候,他的值会被 this.$route.params 的形式暴露出来。

<template>
<div>
<h1>这里是user页面</h1>
<h2>当前的用户ID是:{{$route.params.uid}}</h2>
</div>
</template>

我们还可以同时上传多个参数来一起匹配。比如我们可以同时匹配 uid 和 sid

const routes = [
{
path: '/user/:uid/sid/:sid', //对应的网址路径
name: 'user', //对应的路由名称
component: UserView //对应的组件名称,在上方静态导入
}
]


如果需要动态的将 ID 传给 router ,还需要进行一次数据绑定。

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="'/user/'+uid">User</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return {
uid:3
}
}
}
</script>

接收参数的方式除了使用 $route.params 之外,还可以使用 $route.query $route.hash 等等。


代码下载

下载地址:  密码:xvsv


转载请注明出处:http://gl.paea.cn/n.php?n=200
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索