vue 动态路由传参

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

    需要对应路由配置如下:

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

    //获取参数方法
    this.$route.params.id
     

     

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

    路由配置:

    //这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示
      {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

    //获取参数
    this.$route.params.id
     

     

  3. //query传递的参数会显示在url后面?id=?
      this.$router.push({
              path: '/describe',
              query: {
                id: id
              }
            })

    对应路由配置:

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


    //获取参数
    this.$route.query.id
    注意:
    在子组件中 获取参数的时候是$route.params 而不是
    $router 这很重要~~~

     

上一篇:abap describe


下一篇:未明学院14天打卡笔记 Day8