vue实现路由跳转
Vue 路由跳转的实现方法
在 Vue 中实现路由跳转可以通过 vue-router 来完成。以下是几种常见的路由跳转方式：
声明式导航（模板中使用 <router-link>）
<router-link to="/home">首页</router-link>通过 to 属性指定目标路由路径。
编程式导航（在 JavaScript 中调用）
this.$router.push('/home')使用 $router.push 方法跳转到指定路径。
带参数的跳转
this.$router.push({ path: '/user', query: { id: '123' } })通过 query 传递参数，URL 会显示为 /user?id=123。
命名路由跳转
this.$router.push({ name: 'user', params: { id: '123' } })需要先在路由配置中定义路由名称：
{
path: '/user/:id',
name: 'user',
component: User
}替换当前路由
this.$router.replace('/home')使用 replace 方法不会向 history 添加新记录。
前进/后退
this.$router.go(1) // 前进
this.$router.go(-1) // 后退路由配置示例
在 router/index.js 中配置路由：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('@/views/About.vue')
}
]
})获取路由参数
在组件中可以通过以下方式获取路由参数：
// 获取 query 参数
this.$route.query.id
// 获取 params 参数
this.$route.params.id以上方法涵盖了 Vue 中常见的路由跳转场景，可以根据具体需求选择合适的方式。
