参数传递 重定向
程序员文章站
2022-03-24 20:00:22
...
设置v-bind:to 属性,传入参数id
<!-- name:传组件名 params: 传递参数 需要对象 要用v-bind: -->
<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
在路由中绑定参数:
index.js:
children: [
{path: '/user/profile/:id',name: 'UserProfile',component: UserProfile},
{path: '/user/list',component: UserList},
]
},
在Profile.vue取出参数:
template>
<div>
<!-- 所有元素 不能直接在根节点下 (即 要用标签包裹起来)-->
<h1>个人信息</h1>
{{$route.params.id}}
</div>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
方法二:
先在index.js中的路由中设置 props: true
routes: [
{
path: '/main',
component: Main,
//嵌套路由
children: [
{path: '/user/profile/:id',name: 'UserProfile',component: UserProfile,props: true},
{path: '/user/list',component: UserList},
]
},
{
path: '/login',
component: Login
}
]
然后在Profile.vue中通过组件接收参数:props: [‘id’],然后取出
{{id}}
<template>
<div>
<!-- 所有元素 不能直接在根节点下 (即 要用标签包裹起来)-->
<h1>个人信息</h1>
{{id}}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
设置重定向:
设置一个新的路由 属性如下:
即 走到/goHome页面时 重定向到/main页面
{
path: '/goHome',
redirect: '/main'
}
在Main.vue中放置路由:
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
下一篇: 怎样实现js支持post请求跨域