vue怎么实现页面跳转并带参数

Vue中实现页面跳转并带参数可以通过以下几种方式：

1. 使用路由传参

在路由配置文件中定义路由时，可以通过params或query方式传递参数：

// 定义路由
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile
    }
  ]
})

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

// 通过query方式传参
this.$router.push({ name: 'profile', query: { name: 'Tom' } })

在组件中可以通过$route获取传递的参数：

// 获取params参数
this.$route.params.id

// 获取query参数
this.$route.query.name

2. 使用props传参

在路由配置文件中，可以通过props将参数传递给组件：

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

在组件中，可以通过props接收参数：

export default {
  props: ['id']
}

在页面跳转时，需要使用以下方式传递参数：

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

3. 使用Vuex传参

可以在Vuex中定义一个全局的变量，用于存储需要传递的参数：

const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  }
})

在组件中，使用$store获取参数：

this.$store.state.userInfo

在页面跳转时，可以通过commit方法将参数传递给Vuex：

this.$store.commit('setUserInfo', { name: 'Tom', age: 20 })