关于vue中路由的跳转和参数传递,参数获取

对于vue中的路由跳转和参数传递，可以通过vue-router这个插件来实现。下面我就一步步讲解使用vue-router实现路由跳转和参数传递的完整攻略。

路由跳转

安装和配置vue-router

首先需要安装vue-router插件，可以通过npm命令进行安装：

npm install vue-router --save

安装完成后，在项目的入口文件中导入vue-router并进行配置：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

new Vue({
  router,
  // 其他配置
}).$mount('#app')

其中，routes是路由配置项，定义路由的路径和对应的组件。在路由跳转时，会根据路由配置项中的路径匹配到对应的组件。

编写路由链接和跳转

在组件中，可以使用router-link组件来创建一个路由链接，该组件会被渲染为一个a标签。

<router-link to="/path">链接文本</router-link>

其中，to属性指定了跳转的路径。

在代码中，可以使用router.push()方法来进行路由跳转，该方法会把新的路径推入历史记录栈，然后触发路由切换。也可以使用router.replace()方法来进行路由跳转，该方法不会推入历史记录栈中。

下面是一个示例，创建一个路由链接，然后点击链接进行跳转：

<template>
  <div>
    <router-link to="/path">跳转到path页面</router-link>
  </div>
</template>

<script>
export default {
  // 组件的其他配置
  methods: {
    jumpToPath() {
      // 点击跳转
      this.$router.push('/path')
    }
  }
}
</script>

动态路由

除了静态路由外，还有一种动态路由，可以根据动态参数匹配到不同的组件。在路由配置中，可以使用:来定义动态参数。

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

在组件内，可以使用$route.params来获取动态参数的值。

<template>
  <div>
    用户ID: {{ userId }}
  </div>
</template>

<script>
export default {
  // 组件的其他配置
  computed: {
    userId() {
      return this.$route.params.id
    }
  }
}
</script>

参数传递

路由传参

在进行路由跳转时，可以使用params或query来传递参数。其中，params传递的是动态参数，query传递的是查询参数。

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

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

在路由的配置项中，需要指定props为true，这样路由参数才能被传递到组件中。

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

在组件内，可以通过props来接收路由参数。

<template>
  <div>
    用户ID: {{ userId }}
  </div>
</template>

<script>
export default {
  // 组件的其他配置
  props: {
    userId: {
      type: Number,
      required: true
    }
  }
}
</script>

编程式传参

在组件中，可以使用$router.push()方法进行编程式传参。

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

在组件中，可以通过$route.params或$route.query来获取传递的参数。

<template>
  <div>
    用户ID: {{ userId }}
  </div>
</template>

<script>
export default {
  // 组件的其他配置
  computed: {
    userId() {
      return this.$route.params.id || this.$route.query.id
    }
  }
}
</script>

以上就是关于vue中路由的跳转和参数传递的完整攻略。