vue如何实现路由跳转

Vue 路由跳转的实现方法

Vue 中实现路由跳转主要通过 vue-router 库完成，以下是几种常见的路由跳转方式：

声明式导航（模板中使用 <router-link>）

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

编程式导航（JavaScript 中调用方法）

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

// 带参数跳转（对象形式）
this.$router.push({ path: '/user', query: { id: 1 } })

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

// 替换当前路由（无历史记录）
this.$router.replace('/login')

// 前进/后退
this.$router.go(1)  // 前进一步
this.$router.go(-1) // 后退一步

动态路由匹配 在路由配置中定义动态参数：

const routes = [
  { path: '/user/:id', component: User }
]

组件内通过 this.$route.params.id 获取参数。

路由守卫控制跳转

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    next('/login')
  } else {
    next()
  }
})

命名视图跳转 对于多视图布局：

<router-view name="sidebar"></router-view>
<router-view></router-view>

路由配置：

const routes = [
  {
    path: '/',
    components: {
      default: Main,
      sidebar: Sidebar
    }
  }
]