当前位置：首页 > article >正文

VUE3 路由传参

article 2025/4/1 6:51:58

1.声明式导航与传参

传统情况下的跳转页面是<a>标签；因为vue3主要是单页面应用；所以是页面内跳转；我们点击导航栏，就会出现单页面的跳转；跳转的出口是<router-view>；那控制跳转的方式（也就是知道要跳转到哪个页面）就是<router-link>;其本质还是 a 标签

1.1注意

router-link 会⾃动给当前导航添加两个类名，有什么区别呢？

答：1、 router-link-active : 模糊匹配

2、 router-link-exact-active : 精确匹配

1.2传参方式

1. 查询参数传参

2. 动态路由传参

1. 查询参数传参

格式

//字符串

< router-link to = "/path? 参数名 = 值&参数名=值&…… " > xxx </ router-link >

//对象

< router-link :to = "{

path: '/path',

query: {

参数名 : 值

...

}

}" > xxx </ router-link >

接收示例

<script setup>

import { useRoute } from 'vue-router'

// 得到当前激活的路由对象

const route = useRoute ()

// 获取查询参数

console . log (route.query)

</script>

举例



< router-link to = "/friend?id=10086" > 朋友 </ router-link >



< router-link :to = "{

        path: '/friend',

        query: {

        id: 10086

        }

}" > 朋友 </ router-link >

接收

< script setup >

import { useRoute } from 'vue-router'

const route = useRoute ()

console . log (route.query.id)

</ script >

2.动态路由传参（声明式导航传动态参）

在路由表中

import User from './User.vue'

// 这些都会传递给 `createRouter`
const routes = [
// 动态字段以冒号开始
{ path: '/users/:id', component: User },
]

也可以带多个动态参

path: '/users/:id/:name/:token/:......'

为什么说是动态参呢？答：<router-link :to="`/user/${变量名}`">我是可以传递一个动态的ref属性的变量名，来达到操控目地的；

格式：

< router-link to = "/path/ 具体值 " > xxx </ router-link >

< router-link :to = "{

        name: 'Friend',

        params: {

        参数名: 具体值

        }

}" > xxx </ router-link >

//接收方

<script setup>

import { useRoute } from 'vue-router'

const route = useRoute ()

// 获取动态路由参数

console . log (route.params)

</script>

代码示例

createRouter ({

routes : [ {

        name : 'Friend' ,

        path : '/friend/:fid' ,

        component : Friend

} ]

})



< router-link to = "/friend/10010" > 朋友 </ router-link >



< router-link :to = "{

name: 'Friend',

params: {

fid: 10010

}

}" > 朋友 </ router-link >

< script setup >

import { useRoute } from 'vue-router'

const route = useRoute ()

console . log (route.params.fid)

</ script >

2.重定向

const routes = [{ path: '/home', redirect: '/' }] //跟路径名

const routes = [{ path: '/home', redirect: { name: 'homepage' } }] //跟命名路由

跟一个方法，动态返回重定向目标：

const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]

3.404设置

path: "*" (任意路径) ‒ 前⾯不匹配就命中最后这个

import _404 from '@/views/404.vue'

const router = new VueRouter ({

routes : [

...

{ path : '*' , component : _404 } // 404 配置 , 推荐放在路由表的最后⼀个

]

})