vue页面之间的跳转

Url参数传值

传值方式

类似http://xx?id=1&name=名字

<router-link :to="{ name: 'UserDetail', params: { id: 1 } }">查看用户</router-link>

//脚本：
import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转并保留历史记录
router.push({
  path: '/user/detail',
  query: { id: 1 }
})

// 跳转并替换历史记录（不会留下回退记录）
router.replace({
  name: 'UserDetail',
  params: { id: 1 }
})

接受方式

import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.query.id   // 字符串类型

动态路径传值

传值方式

类似 URL 路径中的动态部分（如 /user/:id）

<router-link :to="{ path: '/user', query: { id: 1 } }">查看用户</router-link>

//脚本：
import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转并保留历史记录
router.push({
  path: '/user/detail',
  query: { id: 1 }
})

// 跳转并替换历史记录（不会留下回退记录）
router.replace({
  name: 'UserDetail',
  params: { id: 1 }
})

**路由配置必须加上:id **

{
  path: '/user/:id',
  name: 'UserDetail',
  component: () => import('@/views/UserDetail.vue')
}

接收方式

import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.query.id   // 字符串类型

发送 state 数据

案例：

发送方：

import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转并携带 state 数据
///保留回退记录
router.push({
  path: '/user/detail',           // 目标路径
  state: {                        // ⬅️ 这是 state 数据（任意对象）
    userId: 123,
    userName: '张三',
    roles: ['admin', 'editor'],
    timestamp: Date.now()
  }
})
///不保留回退记录，
///就是跳转之后，回退不到当前页面，
///假如，在A.vue点击到B.vue页面，B.vue页面点击下面跳转之后，再点回退就会回退到A.vue页面
router.replace({
  path: '/user/detail',
  state: {
    userId: 123,
    userName: '张三'
  }
})

接收方：

// 在目标页面的 <script setup> 中
const userData = history.state?.userData
console.log(userData) // 输出 { userId: 123, userName: '张三', ... }
//或者
import { useRoute } from 'vue-router' 
const route = useRoute()
const userData = route.state?.userData