Vue3路由常用功能
分类： vue 专栏： vue 标签： Vue3路由常用功能
2026-01-05 11:28:53 98浏览
Vue3路由常用功能
搞清楚useroute（获取参数）和userouter（页面跳转）的区别
| useRoute | useRouter | |
| 用途 | 访问当前路由的详细信息（路径、参数、查询等） | 控制路由行为（跳转、替换、监听等） |
| 返回值 | 响应式的 RouteLocationNormalized 对象 | 非响应式的 Router 实例 |
| 功能 | 获取路径、参数、查询等静态信息 | 执行跳转、替换路径、导航守卫等动态操作 |
| 使用场景 | 需要读取路由参数（如 /user/:id 中的 :id） | 需要跳转页面（如 router.push('/home')） |
import {useRouter,useRoute} from 'vue-router'
import {onMounted, ref,watch} from 'vue'
const router = useRouter()
const route = useRoute()
onMounted(() => {
const seltype = route.query.seltype; // 获取?后面的参数
alert(seltype)
router.push('/SeeTip')//跳转页面
})
//如果监听多个参数，请复制以下方法，修改seltype即可
watch(() => route.query.seltype, (p) => {
seltype.value=p;
});
// watch(() => route.query.xxx, (p) => {
// xxx.value=p;
// });
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
您可能感兴趣的博客
他的专栏
java 
vue 
springboot 
Mysql 
ssm 
小程序 
uniapp 
js和jquery 他感兴趣的技术
