<p><strong>1. 路由组件传参</strong><br />页面组件可以通过props接收url参数<br /><em>布尔模式</em><br />{</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="path: '/argu/:name', name: 'argu', component: () => import('@/views/argu.vue'),<br /> props: true" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">path:</span> <span class="hljs-string">'/argu/:name'</span>, <span class="hljs-string">name:</span> <span class="hljs-string">'argu'</span>, <span class="hljs-string">component:</span> () =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">'@/views/argu.vue'</span>), <span class="hljs-string">props:</span> <span class="hljs-literal">true</span></code></pre> <p>}<br /><em>对象模式</em><br />{</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="path: '/about', name: 'about', component: () => import('@/views/About.vue'),<br /> props: {<br /> food: 'banana'<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">path:</span> <span class="hljs-string">'/about'</span>, <span class="hljs-string">name:</span> <span class="hljs-string">'about'</span>, <span class="hljs-string">component:</span> () =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">'@/views/About.vue'</span>), <span class="hljs-string">props:</span> { <span class="hljs-symbol"> food:</span> <span class="hljs-string">'banana'</span> }</code></pre> <p>}<br /><em>函数模式</em><br />{</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="path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">path:</span> <span class="hljs-string">'/search'</span>, <span class="hljs-string">component:</span> SearchUser, <span class="hljs-string">props:</span> (route) =&gt; ({ <span class="hljs-string">query:</span> route.query.q })</code></pre> <p>}</p> <p><strong>2. <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5 History模式</strong><br />vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,例: loccalhost:8080/#/,#就是hash模式</p> <p>如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.push<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a> <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a> 来完成 URL 跳转而无须重新加载页面。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> router = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Router({<br /> mode: 'history',<br /> routes: [...]<br />})</p> <p>当你使用 history 模式时,URL 就像正常的 url,例如 <a href="http://yoursite.com/user/id" rel="nofollow noreferrer" target="_blank">http://yoursite.com/user/id</a>,也好看!<br />不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 <a href="http://oursite.com/user/id" rel="nofollow noreferrer" target="_blank">http://oursite.com/user/id</a> 就会返回 404,这就不好看了。</p> <p>所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。</p> <p>或者</p> <p>在 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。<br /><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> router = new <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Router({<br /> mode: 'history',<br /> routes: [</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="{ path: '*', component: NotFoundComponent }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;">{ <span class="hljs-attribute">path</span>: <span class="hljs-string">'*'</span>, component: NotFoundComponent }</code></pre> <p>]<br />})</p> <p><strong>3. 导航守卫</strong></p> <p>1.导航被触发。<br />2.在失活的组件里调用离开守卫。<br />3.调用全局的 beforeEach 守卫。<br />4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。<br />5.在路由配置里调用 beforeEnter。<br />6.解析异步路由组件。<br />7.在被激活的组件里调用 beforeRouteEnter。<br />8.调用全局的 beforeResolve 守卫 (2.5+)。<br />9.导航被确认。<br />10.调用全局的 afterEach 钩子。<br />11.触发 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 更新。<br />12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。</p> <p><strong>4. 路由元信息</strong><br />定义路由的时候可以配置 meta 字段</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="const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ] }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> <span class="hljs-string">router = new VueRouter({</span> <span class="hljs-attr">routes</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">path</span>: <span class="hljs-string">'/foo',</span> <span class="hljs-attr">component</span>: <span class="hljs-string">Foo,</span> <span class="hljs-attr">children</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">path</span>: <span class="hljs-string">'bar',</span> <span class="hljs-attr">component</span>: <span class="hljs-string">Bar,</span> <span class="hljs-meta">//</span> <span class="hljs-string">a meta field</span> <span class="hljs-attr">meta</span>: <span class="hljs-string">{ requiresAuth: true }</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">})</span> </code></pre> <p><strong>5. 过渡效果</strong></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 id=&quot;app&quot;> <transition-group name=&quot;router&quot;> <router-view key=&quot;default&quot;></router-view><br /> <router-view key=&quot;email&quot; name=&quot;email&quot;></router-view><br /> <router-view key=&quot;tel&quot; name=&quot;tel&quot;></router-view><br /> </transition-group> </div> <p></template></p> <style lang=&quot;less&quot;> .router-enter{ opacity: 0; } .router-enter-active{ transition: opacity 1s ease; } .router-enter-to{ opacity: 1; } .router-leave{ opacity: 1; } .router-leave-active{ transition: opacity 1s ease; } .router-leave-to{ opacity: 0; } </style> <p>" 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">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">transition-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"router"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"default"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"tel"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tel"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">transition-group</span>&gt;</span> <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">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.router-enter</span>{ <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-class">.router-enter-active</span>{ <span class="hljs-attribute">transition</span>: opacity <span class="hljs-number">1s</span> ease; } <span class="hljs-selector-class">.router-enter-to</span>{ <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>; } <span class="hljs-selector-class">.router-leave</span>{ <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>; } <span class="hljs-selector-class">.router-leave-active</span>{ <span class="hljs-attribute">transition</span>: opacity <span class="hljs-number">1s</span> ease; } <span class="hljs-selector-class">.router-leave-to</span>{ <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre>

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