vue路由传参常用的三种方式

1、通过params来传递参数(本人常用)传递参数


接收参数


<li v-for="article in articles" @click="getDescribe(article.id)">

2、通过path跳转

      getDescribe(id) {
        // 直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

对应路由配置如下:

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

接收参数

$route.params.id

3、通过query传参 参数会显示在url后面?id=?

注意:页面之间的跳转使用query 不然的话刷新页面后会找不到参数


 this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

对应的路由配置

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

接收参数

$route.query.id

注意:route与router的区别

$route为当前router跳转对象里面可以获取name、path、query、params等

$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

返回上一个history也是使用$router.go方法




Logo

前往低代码交流专区

更多推荐