Vue路由传递参数与重定向的使用方法总结

下面是详细讲解“Vue路由传递参数与重定向的使用方法总结”的完整攻略。

一、路由传递参数

1. 通过动态路由传递参数

动态路由是指路由路径中包含参数的路由，例如:

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

使用 Vue Router 提供的 $router.params 来获取参数。在这个例子中，你可以这样做:

// User.vue

export default {
  created () {
    console.log(this.$route.params.id)
  }
}

2. 通过路由查询传递参数

你可以在路由链接中传递查询参数，例如:

const router = new VueRouter({
  routes: [
    { path: '/register', component: Register }
  ]
})

// 在 URL 中添加查询参数 `/register?plan=private`
router.push({ path: '/register', query: { plan: 'private' }})

可以通过 $route.query 来获取查询参数。在这个例子中，你可以这样做:

// Register.vue

export default {
  created () {
    console.log(this.$route.query.plan)
  }
}

二、重定向

1. 通过路由别名重定向

你可以使用路由别名来重定向路由。例如:

const routes = [
  { path: '/home', alias: '/', component: Home }
]

这样，在访问 / 路径时，页面实际上会跳转到 /home 路径。

2. 通过路由重定向配置项重定向

你可以使用路由重定向配置项来重定向路由。例如:

const routes = [
  { path: '/home', component: Home },
  { path: '*', redirect: '/home' }
]

这个例子中，任何无法匹配到的路径都会被重定向到 /home 路径。

另外，你还可以通过命名路由来配置重定向。例如:

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

在这个例子中，当访问 /admin 路径时，页面会被重定向到 name 属性为 home 的路由所对应的路径 /home。

以上就是Vue路由传递参数与重定向的使用方法总结，希望对你有所帮助。