这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

准备工作

为了演示传递参数, 我们这里再创建一个组件, 并且将其配置好

第一步: 创建新的组件Profile.vue 
第二步: 配置路由映射 
第三步: 添加跳转的<router-link> 

传递参数的方式

传递参数主要有两种类型: params 和 query

params的类型: 路径的参数

配置路由格式: /router/:id

传递的方式: 在path后面跟上对应的值

传递后形成的路径: /router/123, /router/abc

query的类型:

配置路由格式: /router, 也就是普通配置

传递的方式: 对象中使用query的key作为传递方式

传递后形成的路径: /router?id=123, /router?id=abc

URL: scheme://host[:port]/path?query#fragment

协议://主机:端口/路径?查询
端口默认80，会省略

统一资源定位符的标准格式如下:
协议类型://服务器地址[:端口号][/资源层级UNIX文件路径]文件名[?查询][#片段ID] （hash值

统一资源定位符的完整格式如下:
协议类型://[访问资源需要的凭证信息@]服务器地址[:端口号][/资源层级UNIX文件路径]文件名[?查询][#片段ID]
其中[访问凭证信息@ :端口号?查询#片段ID]都属于选填项。 -->

如何使用它们呢? 也有两种方式: <router-link>的方式和JavaScript代码方式

// router-link
// App.vue
    <!-- <router-link to="/profile">档案</router-link> -->
    <!-- 想要传参使用v-bind，动态，传对象 -->
    <router-link :to="{path : '/profile',query : {name : 'yuli',age : 18}}"> 
      档案</router-link>

// 组件
          <h3>name: {{$route.query.name}}</h3>


// JavaScript代码
    userClick (){
      this.$router.push('/user/' + this.userId)
    },
    profileClick (){
      this.$router.push({
        path : '/profile',
        query : {
          name : 'yuli',
          age : 19
        }
      })
    } 

获取参数

获取参数通过 $route对象 获取的. 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。 通过$route获取传递的信息如下:

<h3>用户信息：{{$route.params.userId}}</h3>
<h3>name: {{$route.query.name}}</h3>

$route和$router是有区别的

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

$route为 当前router跳转对象 里面可以获取name、path、query、params等

在vue里写Vue.use(VueRouter) vue内部执行 插件.install 方法

所有的组件都继承自vue类的原型 为什么可以用this.$router，就是因为把他加到了vue类的原型上
例如 Vue.prototype.name = "yuli" 在vue实例中就可以使用this.name

其实就是Vue构造函数的原型对象上的对象 Vue实例对象会继承这个对象

说白了这部分老是就是告诉我们，router对象是通过添加到Vue原型对象中，我们才得以在vue实例中使用的 这里意思就是把用户定义的router赋值给Vue实例从而全局影响所有.vue组件，比如用户给router添加属性，那么所有.vue组件都能直接使用该属性 就是将创建出来的router实例添加到 Vue类的prototype 原型中，成为全局属性，然后任何组件都继承自Vue，组件可以使用$router属性

简单就是给vue类的原型上定义一个$router属性，然后赋值

// `defaultProperty`定义属性  这个方法在石川bule的js课程学过，还记得，跟直接声明原型没区别
const obj = {
  name: 'why '
}
object.defineProperty(obj, 'age ' ,18)
// 给obj添加属性age


// 相当于Vue.prototype.$router = return this._routerRoot._router;
Object.defineProperty(Vue.prototype,'$router', {
  get() { return this._routerRoot._router }
}
Object.defineProperty(Vue.prototype,'$route', {
  get() { return this. _routerRoot._route }
}
// 最后一个参数叫存取描述符，只有get，说明还是个只读属性
// 当使用这个属性，就会调用get方法，从而返回东西

vue会自己想办法将main.js里的router赋值给this._routerRoot._router，然后赋值给Vue.prototype.$router

尚硅谷的js高级原型链讲的很清楚