怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

--可以通过query ,param两种方式

区别: query通过url传参,刷新页面还在    params刷新页面不在了
    params的类型:

  • 配置路由格式:/router/:id
  • 传递的方式:在path后面跟上对应的值
  •  传递后形成的路径:/router/123

 
//在APP.vue中
    用户    
 
//在index.js
     {
    path: '/user/:userid',
    component: User,
    },

跳转方法:

// 方法1:
按钮
// 方法2:
this.$router.push({name:'users',params:{uname:wade}})
// 方法3:
this.$router.push('/user/' + wade)

可以通过$route.params.userid 获取你说传递的值

   query的类类型

  •   配置路由格式:/router,也就是普通配置
  •   传递的方式:对象中使用query的key作为传递方式
  •   传递后形成的路径:/route?id=123
    
    //01-直接在router-link 标签上以对象的形式
    档案
    /*
        02-或者写成按钮以点击事件形式
            
    */
     
     //点击事件
     profileClick(){
       this.$router.push({
            path: "/profile",
            query: {
              name: "kobi",
              age: "28",
              height: 198
            }
          });
     }

    跳转方法:

    // 方法1:
    按钮
    // 方法2:
    this.$router.push({ name: 'users', query:{ uname:james }})
    // 方法3:
    按钮
    // 方法4:
    this.$router.push({ path: '/user', query:{ uname:james }})
    // 方法5:
    this.$router.push('/user?uname=' + jsmes)

    可以通过$route.query 获取你说传递的值

你可能感兴趣的:(vue.js,javascript,前端,前端框架,es6,vue)