路由传参分为两种类型。 1.在router.js的 path中无需配置参数。 2.在router.js的 path中配置有参数。

我们先看第一种，在router.js的 path中无需配置参数 这种传参方式对应了传统方式，例如：url?a=xxx&b=xxx 对应的admin路由配置，如下：

{
        path: '/admin',  //这里admin后没有配置任何参数
        name: 'admin',
        component: resolve => require.ensure([], () => resolve(require('@/views/admin/admin')), 'admin')
}

那么，对应这种路由配置，其路由跳转并传参，有以下三种方式实现。

1.使用传统标签方式 语法：

<li><a href="/admin?uid=1">张三</a></li>

2.使用传统window.location.href方式 语法：

goToUrl(uid){
   window.location.href="/admin?uid="+uid;
}

3.使用this.$router.push方式 语法：

goToUrl(){
   this.$router.push({
        path:'admin',
        query:{
            uid: 100
        }
   })
}

4.使用this.$router.replace方式 语法：

goToUrl(){
   this.$router.replace({
        path:'admin',
        query:{
            uid: 100
        }
   })
}

this.$router.replace与this.$router.push 的区别，见下表： |方式|说明| |-|-| |this.$router.push|实现指定url跳转，这个方法会向history栈添加一个记录，使用后退this.$router.back();会返回到上一个页面。| |this.$router.replace|实现指定url跳转，这个方法不会向history栈添加记录，使用后退this.$router.back();会返回到上上一个页面。因为它的上个页面是不存在的。history栈没有记录。|

下来我们看第二种，在router.js的 path中配置有参数。 这种方式对应了RESTFul风格，例如：api/arg1/arg2 对应的users路由配置,如下：

{
      path: '/users/:uid', //注意：/users 后面带参数uid
      name: 'users',
      component: resolve => require.ensure([], () => resolve(require('@/views/users/users')), 'users')
}

1.使用传统标签方式

语法：

<li><a href="/users/20">李思思</a></li>
<!--通过属性动态传参-->
<li><a :href="'/users/'+uid">李思思</a></li>

2.使用router-link方式 语法：

<li><router-link to="/users/2">李四</router-link></li>
<li><router-link :to="{name:'users',params:{uid:3}}">王五</router-link></li>

3.使用传统的window.location.href方式 语法：

goToUrl(uid){
   window.location.href="/users/"+uid;
}

4.使用this.$router.push方式 语法：

goToUrl(){
   this.$router.push({
        name:'users',
        params:{
            uid: 100
        }
   })
}

5.使用this.$router.replace方式 语法：

goToUrl(){
   this.$router.replace({
        name:'users',
        params:{
            uid: 100
        }
   })
}

在vue组件中如何获取参数呢？

如果参数是传统传参方式，url?uid=100。采用以下方式接受参数。

this.$route.query.uid

如果参数是使用RESTFul 风格方式，api/100 ,采用以下方式接受参数。

this.$route.params.uid