当前位置:首页 > VUE

vue router怎么实现跳转

2026-01-21 02:11:16VUE

编程式导航

使用 this.$router.push 方法实现页面跳转,参数可以是路径字符串或路由配置对象。例如跳转到 /home 路径:this.$router.push('/home')。传递参数时可以使用对象形式:this.$router.push({ path: '/user', query: { id: 123 } })

声明式导航

在模板中使用 <router-link> 组件,通过 to 属性指定目标路由。例如 <router-link to="/about">About</router-link>。需要传递参数时可以写成 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

vue router怎么实现跳转

路由替换

使用 this.$router.replace 方法替换当前路由,不会向历史记录添加新条目。例如 this.$router.replace('/login')。适用于不需要回退的场景,如登录后跳转主页。

vue router怎么实现跳转

路由重定向

在路由配置中使用 redirect 字段实现自动跳转。例如:

const routes = [
  { path: '/old-path', redirect: '/new-path' }
]

动态路由跳转

通过冒号 : 定义动态路径参数,例如路由配置 { path: '/user/:id', component: User }。跳转时传递参数:this.$router.push('/user/123'),在目标组件中通过 this.$route.params.id 获取参数值。

命名路由跳转

在路由配置中给路由设置 name 属性,例如 { path: '/user', name: 'user', component: User }。跳转时可以通过名称引用:this.$router.push({ name: 'user' }),这种方式不受路径修改的影响。

标签: 跳转vue
分享给朋友:

相关文章

vue插槽实现

vue插槽实现

插槽的基本概念 Vue插槽(Slot)是一种内容分发机制,允许父组件向子组件传递模板片段,子组件通过<slot>标签定义接收位置。插槽的核心作用是增强组件的灵活性和复用性。 默认插槽 子…

vue compile 实现

vue compile 实现

Vue 编译实现原理 Vue 的编译过程将模板字符串转换为渲染函数,主要分为解析、优化和代码生成三个阶段。 解析阶段(Parse) 将模板字符串转换为抽象语法树(AST)。Vue 使用正则表达式和有…

vue 实现树状

vue 实现树状

Vue 实现树状结构的方法 递归组件实现树状结构 递归组件是 Vue 中实现树状结构的常见方法。通过组件自身调用自身,可以轻松构建多层级树状结构。 <template> <ul…

vue实现flvvideo

vue实现flvvideo

vue-flv-player 实现 FLV 视频播放 安装依赖包 npm install flv.js vue-flv-player 基础组件引入 <template> <v…

甘特图vue实现

甘特图vue实现

甘特图 Vue 实现方法 使用开源库 vue-ganttastic 安装依赖: npm install vue-ganttastic 基础实现代码: <template> <…

vue实现watch

vue实现watch

监听数据变化 在Vue中,watch用于监听响应式数据的变化并执行回调函数。基本语法如下: watch: { propertyName(newValue, oldValue) { //…