vue项目实现跳转

Vue项目实现页面跳转的方法

在Vue项目中，页面跳转可以通过多种方式实现，主要分为编程式导航和声明式导航两种形式。

编程式导航

使用this.$router.push()方法进行跳转，可以在方法或生命周期钩子中调用：

// 跳转到指定路径
this.$router.push('/home')

// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })

// 命名路由跳转
this.$router.push({ name: 'user', params: { userId: '123' } })

使用this.$router.replace()方法替换当前路由，不会留下历史记录：

this.$router.replace('/login')

声明式导航

在模板中使用<router-link>组件实现跳转：

<!-- 基本跳转 -->
<router-link to="/home">首页</router-link>

<!-- 带查询参数 -->
<router-link :to="{ path: '/user', query: { id: '123' }}">用户</router-link>

<!-- 命名路由 -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">用户详情</router-link>

路由传参方式

通过params传参：

// 跳转时
this.$router.push({ name: 'detail', params: { id: 1 } })

// 接收参数
this.$route.params.id

通过query传参：

// 跳转时
this.$router.push({ path: '/detail', query: { id: 1 } })

// 接收参数
this.$route.query.id

动态路由匹配

在路由配置中使用动态路径参数：

{
  path: '/user/:id',
  component: User
}

导航守卫

可以使用全局前置守卫控制跳转：

router.beforeEach((to, from, next) => {
  // 跳转前逻辑处理
  next()
})

路由模式

根据项目需求选择路由模式：

const router = new VueRouter({
  mode: 'history', // 或'hash'
  routes
})

注意事项

使用params传参时，必须使用命名路由方式跳转。query传参则可以使用path或name。

动态路由参数变化时，组件实例会被复用，可以使用watch监听$route对象变化或使用beforeRouteUpdate守卫处理。