thème : condensé-nuit-violet
point culminant : a11y-dark
C'est le 4ème jour de ma participation à l'activité de création de notes d'accompagnement du "Cinquième camp d'entraînement des jeunes".
Préparation
Afin de démontrer le passage des paramètres, nous créons ici un autre composant et le configurons
第一步: 创建新的组件Profile.vue
第二步: 配置路由映射
第三步: 添加跳转的<router-link>La façon de passer des paramètres
Il existe deux principaux types de transmission de paramètres : params et query
Le type de params : les paramètres du chemin
Configurer le format de routage :/router/:id
Mode de livraison : suivez le chemin avec la valeur correspondante
Le chemin formé après le passage : /router/123, /router/abc
type de requête :
Format de routage de configuration :/router , c'est-à-dire configuration commune
Mode de livraison : utiliser la clé de la requête dans l'objet comme mode de livraison
Le chemin formé après le passage : /router?id=123, /router?id=abc
URL : schéma://hôte[:port]/path?query#fragment
Protocole://hôte:port/chemin? Requête
Le port par défaut est 80, qui sera omis
统一资源定位符的标准格式如下:
协议类型://服务器地址[:端口号][/资源层级UNIX文件路径]文件名[?查询][#片段ID] (hash值
统一资源定位符的完整格式如下:
协议类型://[访问资源需要的凭证信息@]服务器地址[:端口号][/资源层级UNIX文件路径]文件名[?查询][#片段ID]
其中[访问凭证信息@ :端口号?查询#片段ID]都属于选填项。 -->Comment les utiliser ? Il existe également deux manières : <router-link>la manière et la manière de coder JavaScript.
```js // lien-routeur // fichier App.vue
// composant
nom : { {$route.query.name}}
// JavaScript utilise userClick (){ this.$router.push('/user/' + this.userId) }, profileClick (){ this.$router.push({ chemin : '/profile', requête : { nom : 'yuli', âge : 19 } }) } ```
Obtenir les paramètres
获取参数通过 $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高级原型链讲的很清楚