页面之间的跳转传参，正常前端js里写 window.location.href="xxxxx?id=1" 就可以了； 但是vue不一样 需要操作的是路由history，需要用到 VueRouter, 示例： 常用的场景是：列表页点击“查看”按钮，跳转到详情页。 在列表页（list.vue）按钮点击事件里写上
|
1 2 3 4 |
<span class="token function">detail</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token punctuation">{</span> this<span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">"detail"</span><span class="token punctuation">,</span> query<span class="token punctuation">:</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> row<span class="token punctuation">.</span>id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
运行时浏览器地址栏展示： http://localhost:8080/#/orders/detail?id=31 在详情页(detail.vue)里写上
|
1 2 |
<span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> |
即可获取到参数id了。 解析 先看看 route是什么,在vscode f12后 看到
|
1 2 3 4 5 6 7 |
<span class="token keyword">declare</span> module <span class="token double-quoted-string string">"vue/types/vue"</span> <span class="token punctuation">{</span> <span class="token keyword">interface</span> <span class="token class-name">Vue</span> <span class="token punctuation">{</span> <span class="token variable">$router</span><span class="token punctuation">:</span> VueRouter<span class="token punctuation">;</span> <span class="token variable">$route</span><span class="token punctuation">:</span> Route<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 VueRouter官网 传送门 route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等 其中 params {}对象，包含路由中的动态片段和全匹配片段的键值对 用来实现 /order.detail/1 query {}对象，包含路由中查询参数的键值对。 用来实现 /order/detail?id=1 from:https://www.jianshu.com/p/45163cb031be
View Details