vue路由用法

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

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

对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示 

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

 子组件中: 这样来获取参数

this.$route.params.id

 

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

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

 对应路由配置：

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

对应子组件: 这样来获取参数 

this.$route.query.id

 

<router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>

子路由组件通过 this.$route.query.num 来显示传递过来的参数

<h3>{{this.$route.query.num}}</h3>

 

<router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>

子路由获取的参数：{{this.$route.params.num}}

来源：CSDN

作者：wuxing164

链接：https://blog.csdn.net/wuxing164/article/details/103879071