vue路由传参

第一种

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

第一个页面要传参数的代码

//html代码内

<template>
<div id="LHC">
  <a @click="turnrouter(1)" class="buttonText">路由传参id=1</a>
</div>
</template>

//方法内

methods: {
  //路由跳转
    turnrouter(ins) {
      this.$router.push({
        path: "/describe",     //要跳转的页面路径
        query: {
          id: ins                         //传递的参数，方法要接收ins
        }
      });
    },
}

router的index.js的路由配置

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

接收参数的页面

this.$route.query.id    页面内接收页面一传过来的参数id=1

第二种

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

router的index.js的路由配置

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

methods方法内

//html代码内

<template>
<div id="LHC">
  <a @click="turnrouter(1)" class="buttonText">路由传参id=1</a>
</div>
</template>

//方法内

methods: {
  //路由跳转
    turnrouter(ins) {
      this.$router.push({
        name: "Describe",     //要跳转的页面路径
        params: {
          id: ins                         //传递的参数，方法要接收ins
        }
      });
    },
}

接收参数的页面

this.$route.params.id    页面内接收页面一传过来的参数id=1

第三种

methods方法内

//html代码内

<template>
<div id="LHC">
  <a @click="turnrouter(1)" class="buttonText">路由传参id=1</a>
</div>
</template>

//方法内

methods: {
  //路由跳转
    turnrouter(ins) {
   this.$router.push({
          path: `/describe/${id}`,
    },
}

router的index.js的路由配置
很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。

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

接收参数的页面

this.$route.params.id    页面内接收页面一传过来的参数id=1

第四种

路由直接跳转不传参

 <router-link to="/index">跳转到首页</router-link>

router的index.js的路由配置

  {
     path: '/index',
     name: 'Index',
     component: Index
   }

第五种

路由直接跳转不传参

//html代码内

<template>
<div id="LHC">
  <a @click="turnrouter()" class="buttonText">路由传参id=1</a>
</div>
</template>

//方法内

methods: {
  //路由跳转
    turnrouter() {
         this.$router.push(‘/index’)
         //或
         // 字符串
         //this.$router.push('/index')

         // 对象
         //this.$router.push({ path: '/index' })

         // 命名的路由
         //this.$router.push({ name: 'Index', params: { userId: wise }})
    },
}

router的index.js的路由配置

  {
     path: '/index',
     name: 'Index',
     component: Index
   }