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

Vue学习日记(三)——Vue路由管理vue-router

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">前言</h1> <p>为了给读者更好的体验,去理解vue-router和下一篇介绍vuex,决定还是来一个实战教程来带大家更加的去深入理解vue-router,在这之前,读者先自行了解和去官网下载npm和<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>,附:<a href="https://www.npmjs.com/" rel="nofollow noreferrer" target="_blank">npm官网</a></p> <h1 id="articleHeader1">项目构建</h1> <p>这里我采用vue-cli+webpack构建初始项目,在vue官网里面也有<a href="https://cn.vuejs.org/v2/guide/installation.html" rel="nofollow noreferrer" 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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="# 后面是注释 # $表示当前文件目录 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install # 运行项目my-preoject $ npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs shell"><code><span class="hljs-meta">#</span><span class="bash"> 后面是注释</span> <span class="hljs-meta">#</span><span class="bash"> $表示当前文件目录</span> <span class="hljs-meta"> #</span><span class="bash"> 全局安装 vue-cli</span> <span class="hljs-meta">$</span><span class="bash"> npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> --global vue-cli</span> <span class="hljs-meta">#</span><span class="bash"> 创建一个基于 webpack 模板的新项目</span> <span class="hljs-meta">$</span><span class="bash"> vue init webpack my-project</span> <span class="hljs-meta">#</span><span class="bash"> 安装依赖,走你</span> <span class="hljs-meta">$</span><span class="bash"> <span class="hljs-built_in">cd</span> my-project</span> <span class="hljs-meta">$</span><span class="bash"> npm install</span> <span class="hljs-meta">#</span><span class="bash"> 运行项目my-preoject</span> <span class="hljs-meta">$</span><span class="bash"> npm run dev</span></code></pre> <ul> <li>npm install --global vue-cli 下载构建工具</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000013087828?w=1210&amp;h=321" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image" title="image" style="cursor: pointer;"></span></p> <ul> <li>vue init webpack my-project 初始化项目 <p><span class="img-wrap"><img data-src="/img/remote/1460000013087829?w=1201&amp;h=437" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image" title="image" style="cursor: pointer;"></span></p> </li> <li>npm install 下载相关资源到node_models</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000013087830?w=1177&amp;h=182" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image" title="image" style="cursor: pointer;"></span></p> <ul> <li>npm run dev 运行项目后,在浏览器输入<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/可看到</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000013087831?w=1227&amp;h=669" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image" title="image" style="cursor: pointer;"></span></p> <h1 id="articleHeader2">介绍vue-router</h1> <p>经过上面简单的构建之后,一个项目的初始化就完成了,这里vue-cli和webpack已经帮我们弄好了文件目录结构和基本目录</p> <p>在进行使用vue-router之前,我不得不也先介绍一下vue-router是什么?</p> <p>它是一个vue.js下的路由组件,那什么是路由呢?网上有一大堆官方的介绍,相信对于小白是难以理解的,这里我就简单的说明一下吧。</p> <p>其实路由也就是url,url是什么呢?url就是唯一资源定位符,简单的说,也就是标记页面的唯一存在的一个标签,就像<a href="https://www.baidu.com" rel="nofollow noreferrer" target="_blank">https://www.baidu.com</a>,这里的www.baidu.com就是唯一资源定位符,https就只是一种协议,规范计算机网络的通信协议。</p> <blockquote><p>介绍完这些,那么对于我们究竟该怎么用呢?</p></blockquote> <p>其实很简单,在平时当中,我们就经常碰到在一个网站里面点击链接会弹到另外一个页面,然后就可以发现他们的url改变了,而vue-router就是这样,在同个域名下(这里的域名是<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080),改变域名后面的字符参数,比如<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/me和<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/you是两个不同的页面就是靠vue-router进行实现的。</p> <h1 id="articleHeader3">引用vue-router</h1> <p>如果你在之前没有安装vue-router的话,建议可以先去官网,看着文档使用npm安装一下,这里就不多做介绍了。</p> <p>首先我先在项目my-project/src/components(存放组件的目录)里面添加两个文件me.vue和you.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> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="// me.vue <template> </p> <div> 我是me </div> <p> </template> <script type=&quot;text/ecmascript-6&quot;> <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> <a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a> {} </script> </p> <style scoped> </style> <p> // you.vue <template> </p> <div> 我是you </div> <p> </template> <script type=&quot;text/ecmascript-6&quot;> export default {} </script> </p> <style scoped> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>// me.vue <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>&gt;</span> 我是me <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">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/ecmascript-6"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {} </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> // you.vue <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> 我是you <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">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/ecmascript-6"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {} </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>然后修改my-project/src/router(存放路由相关信息的目录)下面修改index.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> <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 HelloWorld from '@/components/HelloWorld' // 导入组件 import me from '../components/me' import you from '../components/you' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, // 将组件命名到路由上,输入http://localhost:8080/#/me // 即可进入不同的页面 { path: '/me', component: me }, // 将组件命名到路由上,输入http://localhost:8080/#/you // 即可进入不同的页面 { path: '/you', component: you } ] })" 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> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/HelloWorld'</span> <span class="hljs-comment">// 导入组件</span> <span class="hljs-keyword">import</span> me <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/me'</span> <span class="hljs-keyword">import</span> you <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/you'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> Router({ routes: [ { path: <span class="hljs-string">'/'</span>, <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>: <span class="hljs-string">'HelloWorld'</span>, component: HelloWorld }, <span class="hljs-comment">// 将组件命名到路由上,输入http://localhost:8080/#/me</span> <span class="hljs-comment">// 即可进入不同的页面</span> { path: <span class="hljs-string">'/me'</span>, component: me }, <span class="hljs-comment">// 将组件命名到路由上,输入http://localhost:8080/#/you</span> <span class="hljs-comment">// 即可进入不同的页面</span> { path: <span class="hljs-string">'/you'</span>, component: you } ] })</code></pre> <p>这样只会输入<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/me就会进到其他页面,是不是很简单,<br />那么我们怎么在页面里面进行跳转呢?</p> <p>这就运用到了更有趣的知识了就是router-<a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<router-link :to=&quot;/me&quot;>这里是跳转链接</router-link>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"/me"</span>&gt;</span>这里是跳转链接<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></code></pre> <p>网页就自动跳转到<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/me页面了,但是这样总是不好的,因为,如果由于一些原因,我们想修改路由的名字(比如me改成him)就得改两个文件的信息,因此,vue团队也早就想好了,就是name属性,将my-project/src/router(存放路由相关信息的目录)下面修改index.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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" // ... { path: '/me', name: 'me', component: me }, // ..." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-comment">// ...</span> { path: <span class="hljs-string">'/me'</span>, name: <span class="hljs-string">'me'</span>, component: me }, <span class="hljs-comment">// ...</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<router-link :to=&quot;{ name: 'me'}&quot;>这里是跳转链接</router-link>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{ name: 'me'}"</span>&gt;</span>这里是跳转链接<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></code></pre> <p>就可以进行跳转了</p> <h1 id="articleHeader4">高级应用</h1> <ol> <li>前端路由 最初级的应用,就和上面的引用一样,当然还可以通过js代码来改变,这个也很简单,就是比如添加一个按钮,点击按钮通过js跳转到其他页面,就是重定向,简单的js代码也下面这样,就可以跳转到其他页面了</li> </ol> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue.$router.push('/me')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code style="word-break: break-word; white-space: initial;">vue.$router.push(<span class="hljs-string">'/me'</span>)</code></pre> <ol> <li>动态路由 通过router-link传递参数,例如&lt;router-link :to="{ name: 'user', params: { userId }}"&gt;User&lt;/router-link&gt;,传入userId这个参数,进行渲染不同的路由信息</li> <li>嵌套路由 嵌套路由其实简单的理解就是,子路由,例如,我想在me下面在添加几个路由him和she那上面的代码可以这样写之后输入<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/me/him就可以进入到子路由的页面</li> </ol> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// ... { path: '/me', name: 'me', component: me, children: [ { path: 'him' // ... }, { path: 'she' // ... } ] }, // ..." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// ...</span> { path: <span class="hljs-string">'/me'</span>, name: <span class="hljs-string">'me'</span>, component: me, children: [ { path: <span class="hljs-string">'him'</span> <span class="hljs-comment">// ...</span> }, { path: <span class="hljs-string">'she'</span> <span class="hljs-comment">// ...</span> } ] }, <span class="hljs-comment">// ...</span></code></pre> <ol> <li>懒加载 结合异步组件以及在组件的created钩子上触发获取数据的ajax请求,可以最大化的降低加载时间,减少流量消耗。这个对于没有项目的人可能接触比较少,建议先知道这个概念。</li> <li>重定向 可以实现某些需要根据特定逻辑改变页面原本路由的需求,例如简单的未登录状态下的页面访问“个人信息”路由时应该重定向到登录路由页面。</li> <li>History的控制 History是Html5的新语法,个人觉得就是对于跳转的时候,特别是<a href="http://www.js-code.com/tag/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f" title="浏览关于“微信小程序”的文章" target="_blank" class="tag_link">微信小程序</a>,就是控制点击回退按钮的时候不至于退出页面而跳转到自己想要的页面</li> </ol> <h1 id="articleHeader5">总结</h1> <p>其实还有很多高级应用场景,我就不一一列举出来了,因为这些其实最好还是上官方文档进行说明,我这里只是解释一下简单的用法,以及初学者可能对官方文档会有误解来进行说明一下,希望大家还是学会看<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>,附<a href="https://router.vuejs.org/zh-cn/" rel="nofollow noreferrer" target="_blank">官网地址</a></p> <p></code></p>

总结

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

Vue学习日记(三)——Vue路由管理vue-router

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

Vue学习日记(三)——Vue路由管理vue-router

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

80%的人都看过