vue3无法获取到router传递的参数

传值页面

<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>



index.js
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来获取当前路由信息,包括路由传递的参数。下面是具体的解决方案和示例代码:

解决方案:

  1. 首先,需要导入useRoute函数:
import { useRoute } from 'vue-router'
  1. ck函数中调用useRoute函数,获取当前路由的信息:
const ck = (index) => {
  const route = useRoute()
}
  1. 要获取路由传递的参数,可以通过route.params来访问参数对象:
const ck = (index) => {
  const route = useRoute()
  const params = route.params
}
  1. 在示例代码中,可以在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只能在组件的templatesetup部分使用。如果需要在其他生命周期函数或普通函数中获取路由参数,可以通过this.$route.params来访问。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

img


query 为什么传一个数组