vue路由传参方式 nuxt

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方法