<p><code></p> <h3 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-router参数传递</h3> <ol> <li>为什么要在router中传递参数<br />设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息。那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息。</li> <li> <p>vue-router 参数传递的方式</p> <ul> <li> <p>Parma传参<br />贴代码:<br /><em>/router/index.vue</em></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work', name: 'Work', component: Work } ] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-selector-tag">default</span> <span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Router</span>({ <span class="hljs-attribute">routes</span>: [ { path: <span class="hljs-string">'/'</span>, name: <span class="hljs-string">'Home'</span>, component: Home }, { <span class="hljs-attribute">path</span>: <span class="hljs-string">'/work'</span>, name: <span class="hljs-string">'Work'</span>, component: Work } ] })</code></pre> <p>组件<strong>Works</strong>传递一个work的id到组件<strong>Work</strong><br /><em>/components/Home/Comtent/Works.vue</em></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 触发它传递一个对象到组件Work getIt (id) { this.$router.push({ path: '/work', name: 'Work', params: { id: id } }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-comment">// 触发它传递一个对象到组件Work</span> getIt (id) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$router.push({ path: <span class="hljs-string">'/work'</span>, name: <span class="hljs-string">'Work'</span>, params: { id: id } }) }</code></pre> <p><em>/components/Work/Index.vue</em></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;work&quot;> work: {{id}} </div> <p> </template></p> <p> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'Work', data () { return { id: <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$route.params.id //拿到id } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"work"</span>&gt;</span> work: {{id}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'Work'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">id</span>: <span class="hljs-keyword">this</span>.$route.params.id <span class="hljs-comment">//拿到id</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>运行截图:<br /><span class="img-wrap"><img data-src="/img/bV83J8?w=1275&amp;h=721" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Works.png" title="Works.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bV83KI?w=450&amp;h=308" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Work.png" title="Work.png" style="cursor: pointer;"></span></p> </li> <li> <p>query传参<br /> 将上面的parmas改为query即可,即:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" // 传入 this.$router.push({ path: '/work', name: 'Work', query: { id: id } }) ... ... this.$route.query.id // 获取" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code> <span class="hljs-comment">// 传入</span> <span class="hljs-keyword">this</span>.$router.push({ <span class="hljs-string">path:</span> <span class="hljs-string">'/work'</span>, <span class="hljs-string">name:</span> <span class="hljs-string">'Work'</span>, <span class="hljs-string">query:</span> { <span class="hljs-symbol"> id:</span> id } }) ... ... <span class="hljs-keyword">this</span>.$route.query.id <span class="hljs-comment">// 获取</span></code></pre> </li> </ul> </li> <li> <p>parmas与query的区别</p> <ul> <li>query是通过url传递参数,始终显示在url中</li> <li>parmas传参,刷新页面过后就没有数据了,无法将获取到的参数进行保存</li> </ul> </li> </ol> <p><em>总结: 这两种参数的传递方式,各有各的用途,具体的还要自己亲手试一试才知道,前端这个领域,还是要多多亲自动手实践。</em></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25496.html