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

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

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

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

<!-- 动态路由-params -->
 
//在APP.vue中
    <router-link :to="'/user/'+userId" replace>用户</router-link>    
 
//在index.js
     {
    path: '/user/:userid',
    component: User,
    },

跳转方法:

// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法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

  <!--动态路由-query -->
  //01-直接在router-link 标签上以对象的形式
  <router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
  /*
      02-或者写成按钮以点击事件形式
      <button @click='profileClick'>我的</button>    
  */
   
   //点击事件
   profileClick(){
     this.$router.push({
          path: "/profile",
          query: {
            name: "kobi",
            age: "28",
            height: 198
          }
        });
   }

  跳转方法:

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

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