脚本宝典收集整理的这篇文章主要介绍了

我的 Vue.js 学习日记 (十三) – vue-router

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">上节回顾</h1> <p>一个月的期限马上要到了,真是弹指一瞬间的匆匆...<br />上节主要记录了我从<code>子组件修改父组件</code>传递过来的prop值得一个<code>思路过程</code><br />由于近期对于权限控制方面有一定的需求,所以去了解了一下<code>vuex</code>与<code>vue-router</code>,那么今天就来总结一下关于<code>vue-router</code>的一些已有的认识,并且有时间的话进行一下系统的学习</p> <h1 id="articleHeader1">本节目标</h1> <p>总结<code>vue-router</code>基于<code>vue-cli</code>项目的安装及简单使用</p> <h1 id="articleHeader2">1.安装</h1> <p><code>npm install vue-router</code></p> <h1 id="articleHeader3">2.目录</h1> <p>通常来说路由都存放在一个<code>单独的.js</code>文件,路径如下:</p> <p><code>src - router - index.js</code></p> <p>我的<code>index.js</code>现有代码如下:</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="import Vue from 'vue' import Router from 'vue-router' import Frame from '@/components/frame' import StudentList from '@/components/student/student-list' import StudentAdd from '@/components/student/student-add' import DemoSlot from '@/components/demo/demo-slot' import DemoPage from '@/components/demo/demo-page' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Frame, children: [ { path: '/student/list', component: StudentList }, { path: '/student/add', component: StudentAdd }, { path: '/demo/slot', component: DemoSlot }, { path: '/demo/page', component: DemoPage } ] } ] }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Frame <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/frame'</span> <span class="hljs-keyword">import</span> StudentList <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/student/student-list'</span> <span class="hljs-keyword">import</span> StudentAdd <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/student/student-add'</span> <span class="hljs-keyword">import</span> DemoSlot <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/demo/demo-slot'</span> <span class="hljs-keyword">import</span> DemoPage <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/demo/demo-page'</span> Vue.use(Router) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ routes: [ { path: <span class="hljs-string">'/'</span>, component: Frame, children: [ { path: <span class="hljs-string">'/student/list'</span>, component: StudentList }, { path: <span class="hljs-string">'/student/add'</span>, component: StudentAdd }, { path: <span class="hljs-string">'/demo/slot'</span>, component: DemoSlot }, { path: <span class="hljs-string">'/demo/page'</span>, component: DemoPage } ] } ] }) </code></pre> <h1 id="articleHeader4">3.引入</h1> <p>路由创建好了,那么接着就应该将整理好的路由与项目关联起来啦</p> <p>只有两个操作点:</p> <ol> <li>import进来</li> <li>挂在vue实例上</li> </ol> <p>我们打开<code>src - main.js</code></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="import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> from 'vue'<br /> import ElementUI from 'element-ui'<br /> import 'element-ui/lib/theme-chalk/index.css'<br /> import App from './App'<br /> import router from './router'</p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(ElementUI)<br /> Vue.config.productionTip = false</p> <p>/* eslint-disable no-new */<br /> new Vue({<br /> el: '#app',<br /> router,<br /> components: { App },<br /> template: '<App></span>'<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> ElementUI <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'element-ui/lib/theme-chalk/index.css'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> Vue.use(ElementUI) Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, components: { App }, template: <span class="hljs-string">'&lt;App/&gt;'</span> }) </code></pre> <h1 id="articleHeader5">4.使用</h1> <p>现在,凡是在路由组件中配置过的路由记录,现在都可以被导航啦</p> <p><code>注:没有配置过的路由记录是不可以被导航的</code></p> <h2 id="articleHeader6">4-1.路由基础用法:</h2> <p>1.&lt;router-link to="/student/list" tag="<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>"&gt;学员列表&lt;/router-link&gt;</p> <p>意思是通过路由导航到<code>/student/list</code>记录点,<code>to</code>设置目标路由记录点,<code>tag="<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>"</code>表示<code>router-link</code>最终会呈现为一个<code><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></code>元素</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>通过向根实例传入router实例,router会注入到每个组件中,可以通过:<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$router</code>在各个组件当中获取router的实例</p> <p>2.</p> <p>例如:</p> <p><code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$router.push()</code>进行编程式导航</p> <p><code><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$router.go()</code>前进后退等</p> <h1 id="articleHeader7">5.hash与history</h1> <p>简单来理解的话:</p> <p><code>hash</code>:url中带<code>有#</code>,并且只修改<code>#之后的url</code>,默认情况下vue-router是hash模式</p> <p><code>history</code>:url中不带#,使用<code>history.push<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a></code>完成跳转并且需要<code>后台配合</code>使用,使用history模式需要显式指定</p> <p>不过两者的跳转都不会使页面重新加载</p> <h1 id="articleHeader8">6.守卫</h1> <h2 id="articleHeader9">6.1.种类</h2> <p>守卫总共分为:<code>全局守卫</code>、<code>路由守卫</code>、<code>组件守卫</code>三种</p> <p>意思就是分三个区域,<code>全局区域</code>,<code>路由区域</code>,<code>组件区域</code>,很明显是作用域不同</p> <p>全局守卫分3个:<code>前置beforeEach</code>、<code>后置afterEach</code>、<code>解析beforeResolve</code></p> <p>路由独享守卫:<code>进入前beforeEnter</code></p> <p>组件守卫:<code>进入(组件对应)路由前beforeRouteEnter</code>、<code>路由改变前(组件复用时)beforeRouteUpdate </code>、<code>离开(组件对应)路由前beforeRouteLeave</code></p> <p>守卫执行顺序:<a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B" rel="nofollow noreferrer" target="_blank">导航解析流程</a></p> <p>附一张我自己的理解:<br /><span class="img-wrap"><img data-src="/img/bVba8Hi?w=1445&amp;h=693" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><code>注:带有next的守卫一定要调用next()</code></p> <h2 id="articleHeader10">6.2.应用场景</h2> <p>前些天在做权限时通过查找资料,最终发现通过<code>全局前置守卫</code>,可以实现一些<code>权限控制</code>的功能,当然他并不能独立完成需要<code>配合vuex</code>来使用</p> <h1 id="articleHeader11">7.meta 路由元数据</h1> <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><code>注:meta很有用的,例如我们可以通过为路由记录添加meta信息来代表该路由所代表的功能模块代码,在addRoutes时判断是否有权限加载此路由记录</code></p> <h1 id="articleHeader12">8.路由懒加载</h1> <p>由于我们使用的是SPA的方式开发网页,那么有一个庞大的js文件是可想而知的</p> <p>路由懒加载即是为了降低不必要的开销,在路由被访问时才真正的去加载它</p> <p>用法:</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 Foo = () => import('./Foo.vue')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">const</span> Foo = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'./Foo.vue'</span>)</code></pre> <p>只修改了引入方式,使用方式并没有改变</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 } ] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>const router = <span class="hljs-keyword">new</span> VueRouter({ <span class="hljs-symbol"> routes:</span> [ { <span class="hljs-string">path:</span> <span class="hljs-string">'/foo'</span>, <span class="hljs-string">component:</span> Foo } ] })</code></pre> <h1 id="articleHeader13">9.addRoutes 动态添加路由</h1> <p>用法:</p> <p>假设我们有如下路由:</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="var router = new Router({ routes: [ { path: '/', component: Frame, ] } ] }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">var</span> <span class="hljs-string">router = new Router({</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">'/',</span> <span class="hljs-attr">component</span>: <span class="hljs-string">Frame,</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">})</span> </code></pre> <p>并且有如下<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>:</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="var routes = [{ path: '/index', name: '首页', component: 组件, children: [{ path: 'page1', component: 组件1 }, { path: 'page2', component: 组件2 }]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">var</span> <span class="hljs-string">routes = [{</span> <span class="hljs-attr">path</span>: <span class="hljs-string">'/index',</span> <span class="hljs-attr">name</span>: <span class="hljs-string">'首页',</span> <span class="hljs-attr">component</span>: <span class="hljs-string">组件,</span> <span class="hljs-attr">children</span>: <span class="hljs-string">[{</span> <span class="hljs-attr">path</span>: <span class="hljs-string">'page1',</span> <span class="hljs-attr">component</span>: <span class="hljs-string">组件1</span> <span class="hljs-meta">},</span> <span class="hljs-string">{</span> <span class="hljs-attr">path</span>: <span class="hljs-string">'page2',</span> <span class="hljs-attr">component</span>: <span class="hljs-string">组件2</span> <span class="hljs-attr">}]</span></code></pre> <p>那么可以:</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="router.addRoutes(routes)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">router</span><span class="hljs-selector-class">.addRoutes</span>(<span class="hljs-selector-tag">routes</span>)</code></pre> <p>之后就可以成功的导航到新增的三个路由记录啦</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

我的 Vue.js 学习日记 (十三) – vue-router

全部内容,希望文章能够帮你解决

我的 Vue.js 学习日记 (十三) – vue-router

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过