{"id":631,"title":"vue-route\u8def\u7531params\u4f20\u53c2","good":0,"bad":0,"hit":719,"created_at":"2024-01-28 07:00:48","content":"<p>index.js<\/p><p><br\/><\/p><p><span style=\"text-wrap: nowrap;\">import VueRouter from &#39;vue-router&#39;<\/span><\/p><p><span style=\"text-wrap: nowrap;\">\/\/\u5f15\u5165\u7ec4\u4ef6<\/span><\/p><p><span style=\"text-wrap: nowrap;\">import About from &#39;..\/components\/117\/About.vue&#39;<\/span><\/p><p><span style=\"text-wrap: nowrap;\">import Home from &#39;..\/components\/117\/Home.vue&#39;<\/span><\/p><p><span style=\"text-wrap: nowrap;\">import News from &#39;..\/components\/117\/News.vue&#39;<\/span><\/p><p><span style=\"text-wrap: nowrap;\">import Message from &#39;..\/components\/117\/Message.vue&#39;<\/span><\/p><p><span style=\"text-wrap: nowrap;\">import Detail from &#39;..\/components\/117\/Detail.vue&#39;<\/span><\/p><p><span style=\"text-wrap: nowrap;\"><br\/><\/span><\/p><p><span style=\"text-wrap: nowrap;\">\/\/\u521b\u5efa\u8def\u7531\u5668<\/span><\/p><p><span style=\"text-wrap: nowrap;\">export default new VueRouter({<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; \/*<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; \u6ce8\u610f\u8fd9\u91cc\u662froutes\u4e0d\u662frouters\u4e0d\u8981\u5199\u9519\u4e86,<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; \u5426\u5219router-view\u4f1a\u5931\u6548\uff0c\u4e14\u63a7\u5236\u53f0\u4f1a\u62a5No routes found in router<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; *\/<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; routes:[<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; {<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:&#39;\/about&#39;,\/\/\u8def\u7531<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component:About,\/\/\u7ec4\u4ef6\u540d<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; },<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; {<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:&#39;\/home&#39;,\/\/\u8def\u7531<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component:Home,\/\/\u7ec4\u4ef6\u540d<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children:[<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:&#39;news&#39;,\/\/\u5bf9\u5e94home\/news<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component:News,<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:&#39;message&#39;,<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component:Message,<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children:[<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \/\/query\u4f20\u53c2\u65b9\u5f0f:?id=xx&amp;title=yyy<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \/\/ {<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \/\/&nbsp; &nbsp; &nbsp;name:&#39;xiangqing&#39;,\/\/\u8def\u7531\u547d\u540d<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \/\/&nbsp; &nbsp; &nbsp;path:&#39;detail&#39;,<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \/\/&nbsp; &nbsp; &nbsp;component:Detail<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \/\/ }<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style=\"text-wrap: nowrap; color: rgb(255, 0, 0);\">\/\/params\u4f20\u53c2\u65b9\u5f0f:id\/xx\/title\/yyy<\/span><\/span><\/p><p><span style=\"text-wrap: nowrap; color: rgb(255, 0, 0);\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {<\/span><\/p><p><span style=\"text-wrap: nowrap; color: rgb(255, 0, 0);\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name:&#39;xiangqing&#39;,\/\/\u8def\u7531\u547d\u540d,<strong>params\u65b9\u5f0f\u5fc5\u987b\u7528name\u65b9\u5f0f<\/strong><\/span><\/p><p><span style=\"text-wrap: nowrap; color: rgb(255, 0, 0);\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:&#39;detail\/:id\/:title&#39;,<\/span><\/p><p><span style=\"text-wrap: nowrap; color: rgb(255, 0, 0);\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component:Detail<\/span><\/p><p><span style=\"text-wrap: nowrap; color: rgb(255, 0, 0);\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; &nbsp; &nbsp; },<\/span><\/p><p><span style=\"text-wrap: nowrap;\">&nbsp; &nbsp; ]<\/span><\/p><p><span style=\"text-wrap: nowrap;\">})<\/span><\/p><p><br\/><\/p><p><br\/><\/p><p>\u4f20\u53c2\uff1a<br\/><\/p><p>&lt;router-link :to=&quot;{<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style=\"color: rgb(255, 0, 0);\">name:&#39;xiangqing&#39;,\/\/\u6ce8\u610f\u8fd9\u91cc\u662fname\u4e0d\u662fpath<\/span><\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style=\"color: rgb(255, 0, 0);\"> params:{\/\/\u8fd9\u91cc\u662fparams\u4e0d\u662fquery<\/span><\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:m.id,<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title:m.title<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&quot;&gt;<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ m.title }}<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/router-link&gt;<\/p><p><br\/><\/p><p>\u63a5\u6536\u53c2\u6570\uff1a<span style=\"color: rgb(255, 0, 0); text-wrap: wrap;\">&lt;!--query\u4f20\u53c2\u65f6:$route.query.title,params\u4f20\u53c2\u65f6\uff1a$route.params.title--&gt;<\/span><\/p><p>&lt;li&gt;\u6d88\u606f\u6807\u9898:{{$route.<span style=\"color: rgb(255, 0, 0);\">params<\/span>.title}}&lt;\/li&gt;<\/p>"}