vue2动态路由传参2种方式params与query

一、params

1、传：

1）、动态路由匹配（路由配置里写）

    { 
        name:"user",
        path: '/user/:id', 
        component: User
    }   //id：相当于声明了变量

2）、跳转时传参

    1)、跳转时，使用字符串
    //声明式
    <router-link to="/user/01001">用户01001的信息</router-link>
    //编程式
    this.$router.push("/user/01001");

    2）、跳转时，使用对象
    //声明式： 命名的路由，同时传参
    //注意:params使用对象方法传参时，不能使用path属性
    <router-link :to="{ name: 'user', params: { id: '01001' }}">User</router-link>
    //编程式：
    this.$router.push({ name: 'user', params: { id: '01001' }})

2、接：

    //模板里的写法：
     $route.params.参数名
     //脚本里的写法:
     this.$route.params.参数名

二、query

1、传：

1）、路由配置不用改（不用动态路由匹配）

    { path: '/Reg', component: Reg }

2）、跳转时，使用 path

    //1)、跳转时，使用字符串
    //声明式： 
    <router-link to="/Reg?userid=007&username=mjl">User</router-link>
    //编程式：
    this.$router.push("/Reg?userid=007&username=mjl");

//2)、跳转时，使用对象：

    //声明式： 
    <router-link :to="{ path: '/user', query: { id: '01001' }}">User</router-link>
    //编程式：
    $router.push({ path: '/user', query: { id: '01001' }})

注意：如果提供了 path，那么params 会被忽略

    // 带查询参数，变成 /user?id=01001
<!-- 方法1: -->
      <!-- <router-link to="/homequery?id=1&title=666">跳转</router-link>  -->
<!-- 方法2: -->
        <router-link :to="{
          path:'/homequery',
          query:{
            id:999,
            title:'heihei'
          }
        }">跳转2</router-link><br>

params和query的对象写法的区别：

name 对应params

path对应query

2、接

//模板里的写法：
$route.query.参数名

//脚本里的写法:
this.$route.query.参数名

使用场景的区别：

query:传递多个参数时，query方式对应的地址栏上好阅读。

params：传递一个参数时，比较方便

模板里的写法：
$route.params.id 
     
脚本里的写法:
this.$route.params.id

router和route

$router：表示vueRouter对象，由于我们在vue对象里把vueRouter对象
         植入到根属性里，所以，在组件内部是可以使用$router拿到该对象的。
         
$route： 表示匹配到的当前路由对象，可以简单粗暴的理解为，路由配置中
         的某个json对象。当然，这个对象里的信息比路由配置的更多。