theme: condensed-night-purple
highlight: a11y-dark
这是我参与「第五届青训营 」伴学笔记创作活动的第 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代码方式
```js // router-link // App.vue 档案
// 组件
name: { {$route.query.name}}
// 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获取传递的信息如下: ```js
用户信息：{ {$route.params.userId}}
name: { {$route.query.name}}
```
$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属性，然后赋值
``js //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高级原型链讲的很清楚