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

VUE3 路由的跳转方法

news 来源：原创 2025/6/21 17:44:04

Routerlink跳转方法

name属性对应了路由文件配置的name
path属性对应了路由的路径

<RouterLink to="/login">点击跳转登陆</RouterLink>
<RouterLink :to="{name:'login'}">点击跳转登陆</RouterLink>
<RouterLink :to="{path:'/login'}">点击跳转登陆</RouterLink>

RouterLink跳转的传递参数写法

如何传递query参数通过?来表示是query参数 & 来连接多个参数键值对用 = 来表示

<RouterLink :to="`/login?id=${1}&name=${'张三'}&age=${18}`">点击跳转登陆</RouterLink>|<RouterLink :to="{path:'/login', //可使用path或者namequery:{id:1,name:'张三',age:18}}">点击跳转登陆</RouterLink>|<RouterLink :to="{name:'login',query:{id:1,name:'张三',age:18}}">点击跳转登陆</RouterLink>|//接收参数
let route = useRoute();
let {id,name,age} = route.query;

query参数适合修改详情页面在分页中拿到该数据所有的参数带到详情页面将修改页面的初始值替换成具体参数

如何传递params参数通过修改路由配置文件来制定参数名字

路由配置中

    path: '/login/:id/:name/:age?',name: 'login',

如果配置可传属性需要在最后加?必须是最后一个参数保证其清晰的参数名字
params传参必须用name
params传参
不能写对象类型和数组类型

路由跳转写法

<RouterLink :to="`/login/${1}/${'张三'}/${18}`">点击跳转登陆</RouterLink>|
<RouterLink :to="{name:'login',params:{id:1,name:'张三',age:18}
}">点击跳转登陆</RouterLink>//获取参数
let route = useRoute();
let {id,name,age} = route.params;

params参数适合新闻or展示类的组件在分页或者主页获取到文章ID或者详情ID 跳转到详情页拿到ID请求整个详情页面的数据接口

路由props传参

路由配置中的写法

    {path: '/login',//登陆页面name: 'login',component:Login,// props:true,//将params参数传递给组件props(route) { //将路由信息传递给组件return route.query},},

            <RouterLink :to="{name:'login',query:{id:1,name:'张三',age:18}}">点击跳转登陆</RouterLink>|//or<RouterLink :to="{name:'login',params:{id:1,name:'张三',age:18}}">点击跳转登陆</RouterLink>|//获取参数
defineProps(['id','name','age'])

函数式路由跳转 ——最常用

	const router = useRouter();//获取路由实例 useRouter 需要从vuerouter中引入 router.push({ //query参数 path跳转路由path: item.path,query: {id: item.id,name: item.name,componentName: item.componentName}});router.push({ //params传参 使用name跳转路由name: item.componentName,params: {id: item.id,name: item.name,componentName: item.componentName,path: item.path}});router.replace({ // replace 无前进后退记录跳转路由name: item.componentName,params: {id: item.id,name: item.name,componentName: item.componentName,path: item.path}});