<template>
<div id="kuang_jia">
<p>管理员列表</p>
<ul>
<li>
<router-link to="/shouye/message" @click="ck(0)">张三</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(1)">李四</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(2)">王五</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(3)">赵六</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(4)">黄七</router-link>
</li>
</ul>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const ck = (arge0) => {
router.push({
path: '/shouye/message',
query: [
{
INDEX: arge0
}
]
})
}
</script>
<style scoped>
* {
font-weight: bold;
font-size: 20px;
}
ul {
list-style-type: none;
float: left;
}
p {
text-align: left;
}
</style>
<template>
<div id="kuang_jia">
<table>
<tr>
<td>用户名</td>
<td>{{ message[index].name }}</td>
</tr>
<tr>
<td>年龄</td>
<td>{{ message[index].age }}</td>
</tr>
<tr>
<td>电话</td>
<td>{{ message[index].dianhua }}</td>
</tr>
<tr>
<td>管理等级</td>
<td>{{ message[index].level }}</td>
</tr>
<tr>
<td>管理权限</td>
<td>{{ message[index].quanxian }}</td>
</tr>
<tr>
<td>管理时长</td>
<td>{{ message[index].time }}</td>
</tr>
</table>
<button @click="ck()">返回</button>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
const message = [
{
name: '张三',
age: 20,
dianhua: 111111,
level: 1 + '级',
quanxian: 1 + '级',
time: 1 + '年'
},
{
name: '李四',
age: 25,
dianhua: 222222,
level: 2 + '级',
quanxian: 2 + '级',
time: 2 + '年'
},
{
name: '王五',
age: 28,
dianhua: 333333,
level: 3 + '级',
quanxian: 3 + '级',
time: 3 + '年'
},
{
name: '赵六',
age: 30,
dianhua: 555555,
level: 5 + '级',
quanxian: 5 + '级',
time: 4 + '年'
},
{
name: '黄七',
age: 22,
dianhua: 666666,
level: 6 + '级',
quanxian: 6 + '级',
time: 5 + '年'
}
]
const route = useRoute()
const router = useRouter()
console.log(route.query.INDEX)
const index = route.query.INDEX
const ck = () => {
router.go(-1)
}
</script>
<style scoped>
</style>
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/6-3/6-3-2/HomE.vue'
import Profile from '@/components/6-3/6-3-3/ProFile.vue'
import ShouYe from '@/components/test/ShouYe.vue'
import TesT from '@/components/test/模块/TesT.vue'
import UserXinXi from '@/components/test/模块/UserXinXi.vue'
import UserGuanLI from '@/components/test/模块/UserGuanLI.vue'
const routes = [
{
path: '/'
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
meta: {
title: 'about'
}
},
{
path: '/user/:userId',
name: 'User',
component: () => import('../components/6-3/6-3-1/USer.vue'),
meta: {
title: 'user'
}
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
title: 'home'
},
children: [
// 子路由
{
path: 'news',
// 设置/home/news子路由
component: () => import('../components/6-3/6-3-2/HomeNews.vue'),
// 设置匹配成功后所渲染的组件
meta: {
title: 'news'
}
},
{
path: 'msg',
// 设置/home/msg子路由
component: () => import('../components/6-3/6-3-2/HomeMsg.vue'),
// 设置匹配成功后所渲染的组件
meta: {
title: 'msg'
}
}
]
},
{
path: '/Profile',
component: Profile,
meta: {
title: 'news'
}
},
{
path: '/shouye',
component: ShouYe,
meta: {
title: '测试首页'
},
children: [
{
path: '',
component: TesT,
meta: {
title: '系统设置'
}
},
{
path: 'manage',
component: UserGuanLI,
meta: {
title: '用户管理'
}
},
{
path: 'message',
component: UserXinXi,
meta: {
title: '用户信息'
}
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
前几天写的其它页面都没有问题,不清楚为啥这个有问题
mian.js有注册路由吗
【以下回答由 GPT 生成】
在Vue3中,可以通过useRoute
来获取当前路由信息,包括路由传递的参数。下面是具体的解决方案和示例代码:
解决方案:
useRoute
函数:import { useRoute } from 'vue-router'
ck
函数中调用useRoute
函数,获取当前路由的信息:const ck = (index) => {
const route = useRoute()
}
route.params
来访问参数对象:const ck = (index) => {
const route = useRoute()
const params = route.params
}
ck
函数中打印参数对象来验证是否成功获取到路由传递的参数:const ck = (index) => {
const route = useRoute()
const params = route.params
console.log(params) // 输出路由传递的参数
}
完整的代码示例如下:
<template>
<div id="kuang_jia">
<p>管理员列表</p>
<ul>
<li>
<router-link to="/shouye/message" @click="ck(0)">张三</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(1)">李四</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(2)">王五</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(3)">赵六</router-link>
</li>
<li>
<router-link to="/shouye/message" @click="ck(4)">黄七</router-link>
</li>
</ul>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router'
const ck = (index) => {
const route = useRoute()
const params = route.params
console.log(params) // 输出路由传递的参数
}
</script>
请注意,useRoute
只能在组件的template
或setup
部分使用。如果需要在其他生命周期函数或普通函数中获取路由参数,可以通过this.$route.params
来访问。
【相关推荐】