您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 参数传递

《和小米一起学Vue.js》— 参数传递

[ 孤狼 | 2023-01-09 11:29:35 | Vue | 1191°C | 0条评论 ]

在我们使用路由的时候,有时候需要进行页面之间的传递参数,之前我们知道可以使用先routerlink绑定,然后通过 $route.params 来读取参数。但是还有没有其他的方式了呢?


$route.params

使用 params 方式,路由需要单独配置,读取时,也只能固定读取设置好的字段


使用routerlink方式

//App.vue
<template>
<div id="app">
<nav>
<router-link :to="'/user/'+uid">User</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return {
uid:3
}
},
}
</script>
//index.js
//使用懒加载
const UserView=()=> import('../views/User')

//2.使用Vue.use(插件)来安装VueRouter插件
Vue.use(VueRouter)

//3.创建一个对象routes
const routes = [
{
path: '/user/:uid', //对应的网址路径
name: 'user', //对应的路由名称
component: UserView
}
]
//User.vue
<template>
<div>
<h1>这里是user页面</h1>
<h2>当前的用户ID是:{{$route.params.uid}}</h2>
</div>
</template>


使用函数方式

//App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<button @click="Userclick">User</button>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return {
uid:3
}
},
methods:{
Userclick(){
this.$router.push('/user/'+this.uid);
}
}
}
</script>


$route.query

使用 query 方式,路由不需要进行特殊的配置,直接使用固定方式即可,参数由 query 决定


使用routerlink方式

//App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{path:'/User',query:{'uid':55}}">User</router-link>
</nav>
<router-view/>
</div>
</template>
//index.js
//使用懒加载
const UserView=()=> import('../views/User')

//2.使用Vue.use(插件)来安装VueRouter插件
Vue.use(VueRouter)

//3.创建一个对象routes
const routes = [
{
path: '/user', //对应的网址路径
name: 'user', //对应的路由名称
component: UserView
}
]
//User.vue
<template>
<div>
<h1>这里是user页面</h1>
<h2>当前的用户ID是:{{$route.query.uid}}</h2>
</div>
</template>


函数方式

//App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<button @click="Userclick2">User2</button>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
methods:{
Userclick2(){
this.$router.push({
path:'/user',
query:{
uid:66
}
});
}
}
}
</script>




代码下载

下载地址:  密码:in4s


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