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

[Vue]路径跳转和路由高级设置

news 来源：原创 2025/5/23 8:38:32

路由基础使用看另一篇文章:路由基础使用和路径传参

基本属性

path: '/', //主路径，也就是路由路径
alias: ['/myfarie'], //路径别名，即访问该路径时，也会访问到该资源
name:'farie' //设置名字，占位符传参时需要使用
component:()=> import('../views/index.vue'), //绑定页面资源children:[{...},{...}] //子页面，后面会讲redirect:'/xxx' //重定向用，后面讲

补充说明：

alias设置别名传的是一个数组，也就是可以设置多个别名。

注意path设置路由路径，后面再讲到这里都会使用这个称呼。

router-link页面跳转

固定传参

在不需要传参以及目标页面资源的路由路径不会经常变动时，我们可以使用属性 to：

<template><h1>我是主页</h1><br><h1>跳转按钮:</h1><router-link to="/farie?num=666">跳转farie</router-link><br><router-view></router-view><br><footer>我是主页尾部</footer>
</template>

在这里，每次跳转传递的都是固定的路径信息，浏览器拿到的就是to属性对应的字符串。

动态参数

在需要传参时，我们可以使用:to实现动态绑定。

<template><h1>我是主页</h1><h1>跳转按钮:</h1><router-link :to="{path:'/farie',query:{num:666}}">跳转farie</router-link><br><router-view></router-view><footer>我是主页尾部</footer>
</template>

这样还不够，我们还可以搭配script块中的数据使用：

<script setup>
import {ref} from "vue";const fariepath = ref({farie:'/farie',fquery:{num:666}
})
</script><template><h1>我是主页</h1><h1>跳转按钮:</h1><router-link :to="{path:fariepath.farie,query:fariepath.fquery}">跳转farie</router-link><br><router-view></router-view><footer>我是主页尾部</footer>
</template>

占位符传参

之前配置路由信息时提过一个属性name，在我们占位符动态传参时会使用，就是在这里:

<template><h1>我是主页</h1><h1>跳转按钮:</h1><router-link :to="{name:'flower',params:{uid:220013025}}">跳转flower</router-link><br><router-view></router-view><footer>我是主页尾部</footer>
</template>

在占位符传参时，我们参数使用的不是query而是params。同时，如果使用path，那么页面会拿不到值，我们需要使用name来指定目标资源。

编程式导航

编程式导航实际意思是，通过用户的一些操作来实现页面的跳转，例如登录成功后跳转个人首页等等。为了方便演示，我的示例中使用的是点击(chilk)事件。

基本步骤：

1.import我们的useRouter方法，用来获取router对象。

2.通过router对象的push方法，上传我们的路径信息（当然，一般会写在方法里面，通过事件触发）。

<script setup>
import {useRouter} from "vue-router";const router = useRouter();const tofarie = ()=> {router.push({path:'/farie',query:{num:666}});
}const toflower = ()=> {router.push({name:'flower',params:{uid:220013025}});
}
</script><template><h1>我是主页</h1><h1>跳转按钮:</h1><button @click="tofarie">跳转farie</button><button @click="toflower">跳转flower</button><br><router-view></router-view><footer>我是主页尾部</footer>
</template>