#### <font color=red /> 5，vue-router参数传递 **传递参数主要有两种类型: params和query** >**params的类型:** 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc >**query的类型:** 配置路由格式: /router, 也就是普通配置 传递的方式: 对象中使用query的key作为传递方式 传递后形成的路径: /router?id=123, /router?id=abc 声明式的导航`<router-link :to="...">`和编程式的导航`router.push(...)`都可以传参， 本文主要介绍前者的传参方法，同样的规则也适用于编程式的导航。 ### 1，用name传递参数 在路由文件src/router/index.js里配置name属性 `routes: [ { path: '/', name: 'Hello', component: Hello } ]` 模板里(src/App.vue)用`$route.name`来接收 比如：`<p>{{ $route.name}}</p>` ### 2， 通过`<router-link>`标签中的to传参 这种传参方法的基本语法： `<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>` ``` 先在src/App.vue文件中 <router-link :to="{name:'hi1', params:{username:'jspang',id:'555'}}">Hi页面1</router-link> 然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1. {path:'/hi1', name:'hi1', component:Hi1} 最后在模板里(src/components/Hi1.vue)用`$route.params.username`进行接收. {{$route.params.username}}-{{$route.params.id}} ``` ### 3， 用url传递参数----在配置文件里以冒号的形式设置参数。 我们在/src/router/index.js文件里配置路由 `{ path:'/params/:newsId/:newsTitle', component:Params }` 我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。 ~~~ <template> <div> <h2>{{ msg }}</h2> <p>新闻ID：{{ $route.params.newsId}}</p> <p>新闻标题：{{ $route.params.newsTitle}}</p> </div> </template> <script> export default { name: 'params', data () { return { msg: 'params page' } } } </script> ~~~ 在App.vue文件里加入我们的`<router-view>`标签。这时候我们可以直接利用url传值了 `<router-link to="/params/198/jspang website is very good">params</router-link>` ### 4，使用path来匹配路由，然后通过query来传递参数 `<router-link :to="{ name:'Query',query: { queryId: status }}" > router-link跳转Query </router-link>` 对应路由配置： ` { path: '/query', name: 'Query', component: Query }` 于是我们可以获取参数：`this.$route.query.queryId` ## **获取参数: 通过$route对象获取的.** 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。 ```javascript profile 组件中模板获取参数： <p>params: {{$route.params.profile_id}}</p> <p>query: {{$route.query}}</p> ``` >$route和$router是有区别的 $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法 $route为当前router跳转对象里面可以获取name、path、query、params等 ### 传参: JavaScript代码 ```javascript <button @click="ToProfile">档案</button> export default { name: "APP", data (){ return { Profile_id: 'cookie_profile', } }, methods: { ToProfile(){ this.$router.push( { path: '/Profile/' + this.Profile_id, // path: '/Profile' + cookie_profile, query : {age: 24, hobby:'炒股'} }) } } } ```