路由在跳转对应的组件时，怎么进行传值的

目标：在跳转路由时，可以给路由对应的组件内传值

1.声明式导航-跳转传参

声明式：直接在to后面写确定的跳转路径

方式1：在router-link上的to属性传值：/path?参数名=值

比如：<router-link to="/my?name=zs&age=18&id=5"></router-link>

接收这种形式的值： $route.query 获取到路由规则（参数的信息，路径）

 js中：  created(){this.$route.query.name}

style中：{{ $route.query.name }}

方式2：在router-link的to属性传值：/path/值

前提：需要在路由对象（路由规则）的path：配置成 path:"/path/:参数名“,冒号不能省略

比如：<router-link to="/find/小赛"></router-link>

  routes:[{ path:"/find/:name,component:Find}]

js中：created (){ this.$route.params.name}

style中：{{ $route.params.name}}

两者之间的差别：

/api?type=user&id=23 ==>query直接传值<==this.$route.query接收值

/users/12345 ===>利用变量-路径传值<==this.$route.params接收传的值

编码的时候剋提供合理的资源名称：利用url分层特性，暗示结构

2.编程式导航-跳转传参

编程式：js来控制组件的跳转 ==>登录成功，进行跳转

两种方式进行编程式跳转

this.$router.push({ path:"路由路径"，})

this.$router.push({ name:" 路由名"，}) ==>前提：需要在routes:

例如：

[{path:"/my",component:myfind,name="username}] 

this.$router.push({name:"username})

path传参：path:“/” query:{}  <==仅支持query传值

name传参：name:" 组件名" <==既支持query传值，也支持params传值

path:接收传过来的值 created(){ this.$route.query}

name:接收传过来的值：created (){this.$route.params}

区别：path和name相比较：name跳转更稳定一些，path只支持query传值，name既支持query又支持params传值

params和query的比较：query传的值会在地址栏传递，query页面刷新还存在，params通过配合nme传参，在内存传参，性能很高，但是页面刷新值就不在了，传一些临时的值可以利用params，或者隐秘性，安全性很高的数据，可以使用params。我们可以配合本地存储进行配合使用。