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

Vue2学习之旅二:添加路由vue-router

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>作者:心叶<br />时间:2018-04-26 09:26</p> <p>本篇最终项目文件Github地址:github.com/paper520/vue.quick/tree/V2</p> <p><a href="https://segmentfault.com/u/yelloxing/articles">Vue2学习之旅系列文章目录</a></p> <p>前一篇我们已经搭建了一个看起来有点不高大上的架子,为了后续学习的方便,这里想先提前把路由说一下,以后一个知识点一个页面,路由切换,是不是很舒服。</p> <p>首先,我们还是来看看这次我们的项目目录结构变成什么样子了,如下图:</p> <p><span class="img-wrap"><img data-src="/img/bV9qzo?w=300&amp;h=375" src="/img/bV9qzo?w=300&amp;h=375" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <h2 id="articleHeader0">准备工作</h2> <p>这次我们新添加的文件只有PageOne.vue和PageTwo.vue,以及router/index.js。</p> <p>router/index.js先无视,先让我们看看前面二个存在的意义。</p> <p>PageOne.vue和PageTwo.vue是什么,前面一篇文章<a href="https://segmentfault.com/a/1190000014590324" target="_blank">Vue2学习之旅一:初始化项目搭建</a>已经说清楚了,在这里你可以就先简单的认为就是渲染和控制页面中一小块区域(当然也可以是整个页面)的东西,本篇路由跳转就是通过指定一小块区域,通过修改路由来确定是PageOne.vue还是PageTwo.vue来管理这块区域。让我们简单看看他们二个里面的内容。</p> <p>PageOne.vue里面的内容:</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><br /> <span><br /> 这是页面一<br /> </span><br /> </template><br /> " 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">span</span>&gt;</span> 这是页面一 <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>PageTwo.vue里面的内容:</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><br /> <span><br /> 这是页面二<br /> </span><br /> </template><br /> " 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">span</span>&gt;</span> 这是页面二 <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>这样,我们就准备好了二个页面。</p> <p>了解路由的人应该都知道,路由就好比一种状态的切换,比如你点击了一个按钮,如果你没有注册按钮的点击事件,你的点击不会触发你想要的事情的发生。</p> <p>因此,路由跳转之后,如果我们想要页面中指定的一块区域切换用PageOne.vue和PageTwo.vue来管理,就需要配置好路由状态改变的对应事件,这就是我们接下来的事情。</p> <h2 id="articleHeader1">安装<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>路由</h2> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>路由是一个独立的模块,因此,和我们用到vue时一样,我们需要安装他,你应该在package.json中添加下面内容(其实就是在之前安装的vue下面添加那一行vue-router就好了):</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="&quot;dependencies&quot;: { &quot;vue&quot;: &quot;^2.2.6&quot;, &quot;vue-router&quot;: &quot;^3.0.1&quot; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"dependencies"</span>: { <span class="hljs-string">"vue"</span>: <span class="hljs-string">"^2.2.6"</span>, <span class="hljs-string">"vue-router"</span>: <span class="hljs-string">"^3.0.1"</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="npm install " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> </code></pre> <p>此时,你就安装好了我们的vue-router</p> <h2 id="articleHeader2">配置<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>路由</h2> <p>路由安装好了之后,具体路由跳转到某个状态的时候,页面中的那一小块此刻应该由PageOne.vue和PageTwo.vue之中的谁来管理,这需要提前配置好,不然路由可不知道你想干什么,因此,我们需要编辑开始被无视的router/index.js文件,路由就是在这里配置的。</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="import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); //路由跳转的组件,要提前注入 import PageOne from '../components/PageOne.vue';//【地方一】 import PageTwo from '../components/PageTwo.vue'; //路由配置 const router = new VueRouter({ routes: [{ path: '/',//【地方二】 redirect: 'PageOneLink' }, { path: '/PageOneLink',//【地方三】 component: PageOne }, { path: '/PageTwoLink',//【地方四】 component: PageTwo } ] }); export default router; " 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> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span>; Vue.use(VueRouter); <span class="hljs-comment">//路由跳转的组件,要提前注入</span> <span class="hljs-keyword">import</span> PageOne <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/PageOne.vue'</span>;<span class="hljs-comment">//【地方一】</span> <span class="hljs-keyword">import</span> PageTwo <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/PageTwo.vue'</span>; <span class="hljs-comment">//路由配置</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> router = <span class="hljs-keyword">new</span> VueRouter({ routes: [{ path: <span class="hljs-string">'/'</span>,<span class="hljs-comment">//【地方二】</span> redirect: <span class="hljs-string">'PageOneLink'</span> }, { path: <span class="hljs-string">'/PageOneLink'</span>,<span class="hljs-comment">//【地方三】</span> component: PageOne }, { path: <span class="hljs-string">'/PageTwoLink'</span>,<span class="hljs-comment">//【地方四】</span> component: PageTwo } ] }); <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> router; </code></pre> <p>具体的细节你可以以后学会了慢慢体会,此时,我先告诉你几个你应该知道是重点:</p> <p>1.开始我们引入了vue-router,因为配置路由只有他自己知道怎么配置,因此引入是必须的;</p> <p>2.在【地方一】处,我们引入了之前一直耿耿于怀的二个组件,由于后续要指定跳转谁,此处先引入;</p> <p>3.前面的都是准备工作,后面的就是真的配置了,先看【地方三】,我们配置了如果路由状态是PageOneLink的话那块区域由PageOne.vue管理,【地方四】就不言而喻了;</p> <p>4.最后还有【地方二】,由于刚刚打开一个页面的时候,路由应该是什么状态都不是,这里就是配置此时自动跳转到状态PageOneLink。</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: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><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>OK?到这里结束都不难理解吧!想一想,是不是只差最后一步了:使用这个配置好的路由,来让他帮助我们控制页面中每一块。</p> <h2 id="articleHeader3">使用路由</h2> <p>首先,谁使用路由?当然需要他的Vue对象了,我们这里就是根对象(也就是entry.js里面新建的那个),因此,先看看修改后的entry.js:</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 App from './App.vue'; // 1.引入刚刚配置的路由(router/index.js) import router from './router'; //根对象 var vm = new Vue({ //挂载点 el: '#root', //2.使用刚刚的路由配置 router: router, //启动组件 render: function (callback) { return callback(App); } }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><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> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span>; <span class="hljs-comment">// 1.引入刚刚配置的路由(router/index.js)</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span>; <span class="hljs-comment">//根对象</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-comment">//挂载点</span> el: <span class="hljs-string">'#root'</span>, <span class="hljs-comment">//2.使用刚刚的路由配置</span> router: router, <span class="hljs-comment">//启动组件</span> render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">callback</span>) </span>{ <span class="hljs-keyword">return</span> callback(App); } }); </code></pre> <p>仔细对比之前的文件,是不是就多了二行代码(我方便备注1.和2.的地方),应该不用多说了吧!</p> <p>此时,已经使用了,可是,别忘了,还有一件事情,路由跳转之后,应该控制页面里面的哪一块区域?这也需要指定好。</p> <p>由于我们的是给根Vue对象使用,可以在他使用的组件App.vue里面配置,还是先开卡App.vue此刻被改成什么了再说说具体内容:</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> <section> <header> {{msg}}<br /> </header> <ul> <!--路由导航【地方一】--></p> <li> <router-link to=&quot;/PageOneLink&quot;>页面一</router-link> </li> <li> <router-link to=&quot;/PageTwoLink&quot;>页面二</router-link> </li> </ul> <p> <!--路由跳转视图【地方二】--><br /> <router-view></router-view><br /> </section> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data() { return { msg: &quot;vue.quick - 基本版本代码&quot; }; } }; </script><br /> " 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">section</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span> {{msg}} <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-comment">&lt;!--路由导航【地方一】--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/PageOneLink"</span>&gt;</span>页面一<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/PageTwoLink"</span>&gt;</span>页面二<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-comment">&lt;!--路由跳转视图【地方二】--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">section</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> { data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"vue.quick - 基本版本代码"</span> }; } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>可以对比一下,主要就是修改了template里面的内容,添加的地方有二处:</p> <p>1.先看【地方二】,这个是必须的,也就是知道控制页面里的哪一块区域,没错,就是这里占位的地方;</p> <p>2.接着是【地方一】,地方一简单的理解就是页面的二个按钮,你点击其中每一个,就会跳转到对应的状态,和前面的路由配置对应。</p> <p>现在,启动项目,页面访问的时候应该就可以看见下面的效果:<br /><span class="img-wrap"><img data-src="/img/bV9qWl?w=360&amp;h=253" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="点击页面一按钮的时候" title="点击页面一按钮的时候" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bV9qWQ?w=355&amp;h=236" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="点击页面二按钮的时候" title="点击页面二按钮的时候" style="cursor: pointer;"></span></p> <p>这样,路由就简单的完成了。</p> <h2 id="articleHeader4">页面美化(可以无视此段)</h2> <p>为了以后添加新的练习页面的时候,比较好看,建议你可以在App.vue里面的style标签中添加下面的样式:</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="html { font-size: 100px; } body { margin: 0; } header { font-size: 0; } ul { background-color: black; font-size: 0; line-height: 0.4rem; padding: 0 0.3rem 0 0.3rem; } ul > li:not(:last-child) {<br /> margin-right: 0.1rem;<br /> }<br /> ul > li {<br /> font-size: 0.16rem;<br /> display: inline-block;<br /> }<br /> ul > li > a:hover {<br /> color: rgb(240, 227, 227);<br /> }<br /> ul > li > a.router-link-active {<br /> color: #fff;<br /> outline: none;<br /> }<br /> ul > li > a {<br /> color: #60818e;<br /> text-decoration: none;<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">html</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">100px</span>; } <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-tag">header</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-tag">ul</span> { <span class="hljs-attribute">background-color</span>: black; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">line-height</span>: <span class="hljs-number">0.4rem</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">0.3rem</span> <span class="hljs-number">0</span> <span class="hljs-number">0.3rem</span>; } <span class="hljs-selector-tag">ul</span> &gt; <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:not(</span><span class="hljs-selector-pseudo">:last-child)</span> { <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">0.1rem</span>; } <span class="hljs-selector-tag">ul</span> &gt; <span class="hljs-selector-tag">li</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0.16rem</span>; <span class="hljs-attribute">display</span>: inline-block; } <span class="hljs-selector-tag">ul</span> &gt; <span class="hljs-selector-tag">li</span> &gt; <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">rgb</span>(240, 227, 227); } <span class="hljs-selector-tag">ul</span> &gt; <span class="hljs-selector-tag">li</span> &gt; <span class="hljs-selector-tag">a</span><span class="hljs-selector-class">.router-link-active</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">outline</span>: none; } <span class="hljs-selector-tag">ul</span> &gt; <span class="hljs-selector-tag">li</span> &gt; <span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#60818e</span>; <span class="hljs-attribute">text-decoration</span>: none; } </code></pre> <p>此时页面的截图:</p> <p><span class="img-wrap"><img data-src="/img/bV9q1n?w=1160&amp;h=416" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader5">总结</h2> <p>路由的基本用法就这些了,后续对于高级用法如果有添加会新写一篇文章,本系列就是循序渐进的系列,希望路由你理解了,祝你好运!</p> <p></code></p>

总结

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

Vue2学习之旅二:添加路由vue-router

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

Vue2学习之旅二:添加路由vue-router

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

80%的人都看过