vue路由跳转怎么实现

路由跳转的基本方法

在Vue中，可以通过vue-router实现路由跳转。安装vue-router后，在项目中引入并使用。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

声明式导航

使用<router-link>组件实现声明式导航，适合模板中使用。

<router-link to="/home">Home</router-link>
<router-link :to="{ path: '/about' }">About</router-link>

编程式导航

通过this.$router提供的方法实现编程式导航，适合在JavaScript逻辑中跳转。

this.$router.push('/home')
this.$router.push({ path: '/about' })
this.$router.replace('/login') // 替换当前路由
this.$router.go(-1) // 后退一页

命名路由跳转

如果路由配置中定义了name属性，可以通过名称跳转。

const router = new VueRouter({
  routes: [
    { path: '/home', name: 'home', component: Home }
  ]
})

this.$router.push({ name: 'home' })

带参数的路由跳转

可以通过params或query传递参数。

// params传参
this.$router.push({ name: 'user', params: { id: '123' } })

// query传参
this.$router.push({ path: '/user', query: { id: '123' } })

动态路由匹配

在路由配置中使用动态路径参数，实现动态路由。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

this.$router.push('/user/123')

路由懒加载

通过动态导入组件实现路由懒加载，优化性能。

const router = new VueRouter({
  routes: [
    { path: '/home', component: () => import('./views/Home.vue') }
  ]
})