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

vue vue-router vuex element-ui axios的学习笔记(十七)改写learn目录

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">改写目录的原因</h2> <blockquote><p>既然使用的是前后端分离的写法,就该彻底分离,我应该将后台管理页面也写在learn项目里面,现在这个结构就显得不合理了,进入后台管理页面应该是全新页面,现在的结构并不合理!</p></blockquote> <h2 id="articleHeader1">改写步骤</h2> <p><span class="img-wrap"><img data-src="/img/remote/1460000013032933" src="/img/remote/1460000013032933" alt="选区_018.png" title="选区_018.png" style="cursor: pointer; display: inline;"></span></p> <h3 id="articleHeader2">1、新建一个admin目录</h3> <blockquote><p>添加页面<br />admin.vue 用于管理后台路由<br />adminlogin.vue 用于后台管理员登录<br />home.vue 用于后台主页显示信息<br />mangeradmin.vue 用于管理管理员账户<br />mangeruser.vue 用于管理用户账户<br />mangerprods.vue 用于管理商品操作<br />mangersends.vue 用于管理用户发货</p></blockquote> <h3 id="articleHeader3">2、重新编写路由</h3> <p>打开route/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><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 Home from '@/components/home' import ConHome from '@/components/con-home' import Login from '@/components/login' import Regin from '@/components/regin' import Page404 from '@/components/404' import Products from '@/components/page/products' import FAQ from '@/components/page/FAQ' import Manger from '@/components/page/manger' import My from '@/components/page/manger/my' import Send from '@/components/page/manger/send' import MyHistory from '@/components/page/manger/history' import ProductList from '@/components/page/product/productlist' import ProductContent from '@/components/page/product/productcontent' // 引入后端管理组件 import Admin from '@/admin/admin' import AdminLogin from '@/admin/views/adminlogin' import AdminHome from '@/admin/views/adminhome' import MangerAdmin from '@/admin/views/mangeradmin' import MangerProds from '@/admin/views/mangerprods' import MangerSends from '@/admin/views/mangersends' import MangerUser from '@/admin/views/mangeruser' Vue.use(Router) export default new Router({ // 配置路由 routes: [ // 前段页面路由 { path: '/', hidden: true, type: 'client', component: Home, children: [ { path: '/', hidden: true, component: ConHome }, { path: '/products', name: '商品', class: 'el-icon-goods', component: Products, redirect: '/product/all', children: [ { // 这里用的动态路由,需要一个冒号: path: '/product/:class', component: ProductList } ] }, { path: '/product/:class/:productname', hidden: true, component: ProductContent }, { path: '/FAQ', name: '文档', component: FAQ }, { path: '/manger', name: '工作台', redirect: '/manger/my', component: Manger, hasChild: true, children: [ {path: '/manger/my', name: '我的信息', component: My}, {path: '/manger/send', name: '发货管理', component: Send}, {path: '/manger/history', name: '发货记录', component: MyHistory} ] } ] }, // 后端页面路由 { path: '/admin', component: Admin, type: 'admin', hidden: true, children: [ { path: '/admin', component: AdminHome, name: '管理首页' }, { path: '/admin/mangeprods', name: '商品管理', component: MangerProds }, { path: '/admin/mangesends', name: '订单管理', component: MangerSends }, { path: '/admin/mangeuser', name: '用户管理', component: MangerUser }, { path: '/admin/mangeadmin', name: '管理员账户', component: MangerAdmin } ] }, // 登录注册以及404页面路由 { path: '/admin/login', hidden: true, component: AdminLogin }, { path: '/login', name: '', hidden: true, component: Login }, { path: '/regin', name: '', hidden: true, component: Regin }, { path: '*', hidden: true, component: Page404 } ] })" 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-comment">// 引入前端组件</span> <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/home'</span> <span class="hljs-keyword">import</span> ConHome <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/con-home'</span> <span class="hljs-keyword">import</span> Login <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/login'</span> <span class="hljs-keyword">import</span> Regin <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/regin'</span> <span class="hljs-keyword">import</span> Page404 <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/404'</span> <span class="hljs-keyword">import</span> Products <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/products'</span> <span class="hljs-keyword">import</span> FAQ <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/FAQ'</span> <span class="hljs-keyword">import</span> Manger <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/manger'</span> <span class="hljs-keyword">import</span> My <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/manger/my'</span> <span class="hljs-keyword">import</span> Send <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/manger/send'</span> <span class="hljs-keyword">import</span> MyHistory <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/manger/history'</span> <span class="hljs-keyword">import</span> ProductList <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/product/productlist'</span> <span class="hljs-keyword">import</span> ProductContent <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/page/product/productcontent'</span> <span class="hljs-comment">// 引入后端管理组件</span> <span class="hljs-keyword">import</span> Admin <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/admin'</span> <span class="hljs-keyword">import</span> AdminLogin <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/views/adminlogin'</span> <span class="hljs-keyword">import</span> AdminHome <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/views/adminhome'</span> <span class="hljs-keyword">import</span> MangerAdmin <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/views/mangeradmin'</span> <span class="hljs-keyword">import</span> MangerProds <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/views/mangerprods'</span> <span class="hljs-keyword">import</span> MangerSends <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/views/mangersends'</span> <span class="hljs-keyword">import</span> MangerUser <span class="hljs-keyword">from</span> <span class="hljs-string">'@/admin/views/mangeruser'</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({ <span class="hljs-comment">// 配置路由</span> routes: [ <span class="hljs-comment">// 前段页面路由</span> { path: <span class="hljs-string">'/'</span>, hidden: <span class="hljs-literal">true</span>, <span class="hljs-keyword">type</span>: <span class="hljs-string">'client'</span>, component: Home, children: [ { path: <span class="hljs-string">'/'</span>, hidden: <span class="hljs-literal">true</span>, component: ConHome }, { path: <span class="hljs-string">'/products'</span>, name: <span class="hljs-string">'商品'</span>, <span class="hljs-keyword">class</span>: <span class="hljs-string">'el-icon-goods'</span>, component: Products, redirect: <span class="hljs-string">'/product/all'</span>, children: [ { <span class="hljs-comment">// 这里用的动态路由,需要一个冒号:</span> path: <span class="hljs-string">'/product/:class'</span>, component: ProductList } ] }, { path: <span class="hljs-string">'/product/:class/:productname'</span>, hidden: <span class="hljs-literal">true</span>, component: ProductContent }, { path: <span class="hljs-string">'/FAQ'</span>, name: <span class="hljs-string">'文档'</span>, component: FAQ }, { path: <span class="hljs-string">'/manger'</span>, name: <span class="hljs-string">'工作台'</span>, redirect: <span class="hljs-string">'/manger/my'</span>, component: Manger, hasChild: <span class="hljs-literal">true</span>, children: [ {path: <span class="hljs-string">'/manger/my'</span>, name: <span class="hljs-string">'我的信息'</span>, component: My}, {path: <span class="hljs-string">'/manger/send'</span>, name: <span class="hljs-string">'发货管理'</span>, component: Send}, {path: <span class="hljs-string">'/manger/history'</span>, name: <span class="hljs-string">'发货记录'</span>, component: MyHistory} ] } ] }, <span class="hljs-comment">// 后端页面路由</span> { path: <span class="hljs-string">'/admin'</span>, component: Admin, <span class="hljs-keyword">type</span>: <span class="hljs-string">'admin'</span>, hidden: <span class="hljs-literal">true</span>, children: [ { path: <span class="hljs-string">'/admin'</span>, component: AdminHome, name: <span class="hljs-string">'管理首页'</span> }, { path: <span class="hljs-string">'/admin/mangeprods'</span>, name: <span class="hljs-string">'商品管理'</span>, component: MangerProds }, { path: <span class="hljs-string">'/admin/mangesends'</span>, name: <span class="hljs-string">'订单管理'</span>, component: MangerSends }, { path: <span class="hljs-string">'/admin/mangeuser'</span>, name: <span class="hljs-string">'用户管理'</span>, component: MangerUser }, { path: <span class="hljs-string">'/admin/mangeadmin'</span>, name: <span class="hljs-string">'管理员账户'</span>, component: MangerAdmin } ] }, <span class="hljs-comment">// 登录注册以及404页面路由</span> { path: <span class="hljs-string">'/admin/login'</span>, hidden: <span class="hljs-literal">true</span>, component: AdminLogin }, { path: <span class="hljs-string">'/login'</span>, name: <span class="hljs-string">''</span>, hidden: <span class="hljs-literal">true</span>, component: Login }, { path: <span class="hljs-string">'/regin'</span>, name: <span class="hljs-string">''</span>, hidden: <span class="hljs-literal">true</span>, component: Regin }, { path: <span class="hljs-string">'*'</span>, hidden: <span class="hljs-literal">true</span>, component: Page404 } ] })</code></pre> <h3 id="articleHeader4">3、改写前端页面代码</h3> <blockquote><p>这样重写路由之后会造成原来的导航菜单路由出错,所以需要改写前端导航的代码,主要是2个地方,更重要的是要改写前端结构</p> <p>我的目的是要前端和后端页面是完全分离的,按原先的代码我直接将header.vue和footer.vue直接写在了APP.vue里面,这样的话会让我进入后端页面时也会渲染出头部和底部,这和我的想法是不一样的,所以首先改写APP.vue</p> </blockquote> <p>1、打开APP.vue<br /> 将头部和底部抽离出来,放在home.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> <div id=&quot;app&quot;> <router-view></router-view> </div> <p></template></p> <p><script></p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app' } </script></p> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .container { width: 100%; max-width: 1366px; margin: 80px auto; } </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">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">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>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</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>&gt;</span><span class="css"> <span class="hljs-selector-id">#app</span> { <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Avenir'</span>, Helvetica, Arial, sans-serif; <span class="hljs-attribute">-webkit-font-smoothing</span>: antialiased; <span class="hljs-attribute">-moz-osx-font-smoothing</span>: grayscale; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">color</span>: <span class="hljs-number">#2c3e50</span>; } <span class="hljs-selector-class">.container</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">max-width</span>: <span class="hljs-number">1366px</span>; <span class="hljs-attribute">margin</span>: <span class="hljs-number">80px</span> auto; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>2、打开home.vue<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="<template></p> <div class=&quot;section&quot;> <!-- 头部组件渲染 --><br /> <header-ly></header-ly> <!-- 中间主要区域容器 --><br /> <!-- 添加一个element-ui内置的过渡动画 --><br /> <transition name=&quot;el-zoom-in-center&quot;> <!-- 通过路由渲染不同内容的页面 --><br /> <router-view></router-view><br /> </transition> <!-- 底部 --><br /> <!-- 底部组件渲染 --><br /> <footer-ly></footer-ly> </div> <p></template><br /> <script> // 导入组件 import HeaderLy from '@/components/header' import FooterLy from '@/components/footer' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'home', components: { HeaderLy, FooterLy } } </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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"section"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 头部组件渲染 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">header-ly</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">header-ly</span>&gt;</span> <span class="hljs-comment">&lt;!-- 中间主要区域容器 --&gt;</span> <span class="hljs-comment">&lt;!-- 添加一个element-ui内置的过渡动画 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"el-zoom-in-center"</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">transition</span>&gt;</span> <span class="hljs-comment">&lt;!-- 底部 --&gt;</span> <span class="hljs-comment">&lt;!-- 底部组件渲染 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">footer-ly</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">footer-ly</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">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 导入组件</span> <span class="hljs-keyword">import</span> HeaderLy <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/header'</span> <span class="hljs-keyword">import</span> FooterLy <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/footer'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'home'</span>, <span class="hljs-attr">components</span>: { HeaderLy, FooterLy } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>3、新建一个con-home.vue来存放主页也就是home页面的内容<br />con-home.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> <div class=&quot;container&quot;> <h1>home</h1> </p></div> <p></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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>home<span class="hljs-tag">&lt;/<span class="hljs-name">h1</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> </code></pre> <p>4、改写header.vue的菜单设置</p> <blockquote><p>因为我现在只要前端的路由,这里我想了2种方法</p></blockquote> <ul> <li>1、需要哪里的路由就找哪里的路由</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000013032934" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="选区_017.png" title="选区_017.png" style="cursor: pointer;"></span></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="v-for=&quot;route in $router.options.routes&quot; // 改为 v-for=&quot;route in $router.options.routes[0].children&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"route in <span class="hljs-variable">$router</span>.options.routes"</span> <span class="hljs-comment">// 改为</span> v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"route in <span class="hljs-variable">$router</span>.options.routes[0].children"</span></code></pre> <blockquote><p>这样的方法很简单,但是有一个弊端,我相当于把路由的顺序写死了,直接就找routes的第一个object,如果后期在routes里面又加入新的路由,这样很可能又需要改写一次,这样就很不灵活了,但很简单!!</p></blockquote> <ul> <li>2、这个只是思路,我没做</li> </ul> <blockquote><p>首先再header.vue被创建的时候将routes用filter或者foreach的办法找出需要的那部分路由,比如加个字段 type: 'client'来表明这是前端路由,然后就这些路由数据写在data里面,再用来循环,这样就很灵活了,但稍微麻烦一点!</p></blockquote> <h3 id="articleHeader5">4、测试</h3> <p>前端页面</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013032935" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="选区_019.png" title="选区_019.png" style="cursor: pointer;"></span></p> <p>头部的路由是正常的</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013032936" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="选区_020.png" title="选区_020.png" style="cursor: pointer;"></span></p> <p>后端页面</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013032937" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="选区_021.png" title="选区_021.png" style="cursor: pointer;"></span></p> <p>后端路由</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013032938" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="选区_022.png" title="选区_022.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader6">总结</h2> <blockquote><p>还是经验太过欠缺了,要是一开始就有工程化思想的话,就不会有这些麻烦事了,接下来先把相关的后端页面和逻辑写好</p></blockquote> <h2 id="articleHeader7">github地址</h2> <p>learn:<a href="https://github.com/lyttonlee/learn" rel="nofollow noreferrer" target="_blank">https://github.com/lyttonlee/...</a><br />server:&nbsp;<a href="https://github.com/lyttonlee/express-server-for-learn" rel="nofollow noreferrer" target="_blank">https://github.com/lyttonlee/...</a></p> <p></code></p>

总结

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

vue vue-router vuex element-ui axios的学习笔记(十七)改写learn目录

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

vue vue-router vuex element-ui axios的学习笔记(十七)改写learn目录

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

80%的人都看过