vue路由实现跳转

vue路由跳转的实现方法

Vue Router提供了多种方式实现路由跳转，根据不同的使用场景可以选择合适的方法。

声明式导航

使用<router-link>组件创建导航链接，这种方式在模板中直接使用：

<router-link to="/home">首页</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>

编程式导航

通过this.$router实例方法实现跳转，通常在组件方法中使用：

// 字符串路径
this.$router.push('/home')

// 对象形式
this.$router.push({ path: '/home' })

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

// 带查询参数
this.$router.push({ path: '/register', query: { plan: 'private' } })

替换当前路由

使用replace方法不会向history添加新记录：

this.$router.replace({ path: '/home' })
// 或者声明式
<router-link to="/home" replace></router-link>

路由重定向

在路由配置中使用redirect实现自动跳转：

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

导航守卫控制跳转

可以使用全局或路由独享的守卫控制跳转行为：

router.beforeEach((to, from, next) => {
  // 必须调用next()才能继续跳转
  if (authRequired(to)) next('/login')
  else next()
})

动态路由跳转

对于动态路由参数的变化，需要特别注意组件复用问题：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应
    }
  }
}

命名视图跳转

对于命名视图的复杂布局，可以指定要跳转的视图：

this.$router.push({
  name: 'user',
  params: { userId: 123 },
  query: { tab: 'info' }
})

每种跳转方法适用于不同场景，声明式导航适合模板中的链接，编程式导航适合逻辑控制跳转，守卫适合权限控制等全局处理。