浙江公司响应式网站建设推荐,新工商名录企业应用平台,网站做项目,网站换vps本文主要介绍在多个页面存在相同部分时#xff0c;如何提取公共组件然后在多个页面中导入组件重复使用来减少重复代码。在这基础上介绍了通过嵌套路由的方式来避免页面较多或公共部分较多的情况下#xff0c;避免不断手动导入公共组件的麻烦#xff0c;并且加快页面跳转的速… 本文主要介绍在多个页面存在相同部分时如何提取公共组件然后在多个页面中导入组件重复使用来减少重复代码。在这基础上介绍了通过嵌套路由的方式来避免页面较多或公共部分较多的情况下避免不断手动导入公共组件的麻烦并且加快页面跳转的速度。 文章目录 本系列前文传送门一、场景说明二、公共组件提取公共组件 三、嵌套路由本系列下一篇文章传送门 本系列前文传送门
「网页开发前端开发Vue」01 快速入门快速写一个Vue的HelloWorld项目「网页开发前端开发Vue」02 从单页面到多页面网站使用路由实现网站多个页面的展示和跳转「网页开发前端开发页面布局」03 学会够用的CSS实现任意你想要的页面布局「网页开发前端开发Vue」04 快速掌握开发网站需要的Vue基础知识「网页开发前端开发Vue」05 Vue实战从零到一实现一个网站导航栏 一、场景说明
在前面的文章中我们已经介绍过如何编写多个页面然后在上一篇文章中我们为首页实现了一个导航栏。
现在考虑这样一个场景我们有Home和About两个页面为了用户在各个页面之间跳转方便有良好的网页浏览体验我们考虑在About页面也增加导航栏如下
/home /about
------------------ -----------------
| Header | | Header |
| -------------- | | ------------- |
| | Home | | ------------ | | About | |
| | Content | | | | Content | |
| -------------- | | ------------- |
------------------ -----------------二、公共组件
当我们需要在About页面中也增加一个相同的导航栏时我们当然可以直接拷贝一份代码到About页面的代码中但显然我们不会这么做。
在编程语言中为了应对相同代码在多处使用的情况会有函数、类、模块的设计而在前端框架的设计中会通过将公共部分或者说相同的代码部分提取成独立的组件然后在多处重复使用。
提取公共组件
我们将上次开发好的含导航栏的首页代码复制一份然后命名为MyHeader.vue如下
templatediv idappdiv classheaderdiv classcontent-maindiv classlogoimg src../assets/logo.png /span我的网站/span/divul classnav-itemsli v-foritem in routerList :keyitem.idel-link click$router.push({ path: item.path }) typeinfo{{ item.name }}/el-link/li/uldiv classuserel-button sizemini注册/el-buttonel-button sizemini登录/el-button/div/div/div/div
/templatescript
export default {data() {return {routerList: [{path: /,name: 首页,},{path: /product,name: 产品,},{path: /about,name: 关于我们,}]}}
}/scriptstyle
li {display: inline-block;margin: 20px;
}.nav-items {display: inline-block;
}.logo {display: inline-block;cursor: pointer;margin-right: 46px;/* img 表示 classlogo的元素中的img标签 */img {width: 20px;height: 20px;vertical-align: middle;margin-right: 10px;}span {font-weight: bold;vertical-align: middle;}
}.user {display: inline-block;margin-left: 46px;}
/style然后在原本的首页代码HelloWorld.vue中将导航栏代码作为组件导入代码改动如下
由于我们还没有删除原本存在的导航栏代码所以现在如果成功导入一个新的导航栏后首页应该要有两个导航栏我们到浏览器验证这一点如下
并且确认两个导航栏的跳转功能都符合预期然后我们就可以将首页代码HelloWorld.vue中的导航栏代码删除然后在About代码中重复我们刚才导入导航栏组件的操作About.vue代码如下
templatediv idappMyHeader/MyHeaderh1This is a About page/h1/div
/templatescript
import MyHeader from ./MyHeader.vue;
export default {components: { MyHeader },
}/script我们回到浏览器中就可以看到首页和About页面显示如下两个页面之间可以非常快速地跳转
三、嵌套路由
我们刚才的做法是直接把导航栏作为一个公共组件然后在用到的页面中导入使用。但如果随着我们的项目规模变大网站页面增多我们如果每写一个页面都需要导入一次导航栏组件就有点重复代码的味道了。
为此我们可以使用嵌套路由来解决我们再次看到两个页面的组成如下
/home /about
------------------ -----------------
| Header | | Header |
| -------------- | | ------------- |
| | Home | | ------------ | | About | |
| | Content | | | | Content | |
| -------------- | | ------------- |
------------------ -----------------嵌套路由的用法就是
在两个具体路径的共同路径对应的页面代码中放入公共部分代码然后使用router-view代表不同的部分最后将不同的部分作为vue-router实例Router的children参数传入由vue-router渲染不同的部分来替换router-view。
比如这里的/home和/about的公共路径就是/公共代码是导航栏部分代码所以应该在路径/对应的代码中放入导航栏组件代码然后用router-view代表Home和About两个页面中各自独有的部分。
因为现在路径/直接对应的是HelloWorle.vue导航栏代码和首页代码暂时耦合在一起所以我们需要先把原本的HelloWolrd.vue和About.vue拆成三个代码文件Layout.vue, HellWorld.vue和About.vue三个文件代码如下:
HellWorld.vue
templatediv idapph1This is a Home page/h1/div
/templateAbout.vue
templatediv idapph1This is a About page/h1/div
/templateLayout.vue
templatediv idappMyHeader/MyHeaderrouter-view/router-view/div
/templatescript
import MyHeader from ./MyHeader.vue;
export default {components: { MyHeader },
}
/script之后在渲染首页的时候vue-router就会将router-view替换成HelloWorld.vue的内容在渲染About页面的时候vue-router就会将router-view替换成About.vue的内容。
但是我们需要跳转vue-router实例化时传入的routes参数才能实现这个效果。 于是我们回到src/router/index.js进行如下代码调整
回到浏览器我们可以看到页面已经如我们预期的那样在两个页面中都展示导航栏了如下
之后如果我们再添加新的页面比如添加一个产品页面Product来对应路径/product这个改动只需要增加一个Product.vue然后在src/router/index.js中增加一个路径对应关系如下
Product.vue
templatediv idapph1This is a Product page/h1/div
/templatesrc/router/index.js代码改动
回到我们的浏览器尝试点击导航栏的「产品」就可以跳转到路径/product对应的Product页面页面内容如下 可以看到我们不需要在product.vue中添加导航栏的代码就可以让页面平等地拥有相同的导航栏这就是嵌套路由的好处。当我们的页面相同部分的内容比较多提取的公共组件也比较多这种不需要将各个公共组件依次手动导入的做法优势就会更加明显。
甚至我们会发现现在点击导航栏在各个页面之间跳转的速度极快浏览器不需要重新加载页面资源就可以实现页面切换这就是我们之前提到的vue-router的router-view和router-link进行跳转的好处。(●ˇ∀ˇ●)
本系列下一篇文章传送门
「网页开发前端开发Vue」07 前后端分离如何在Vue中请求外部数据 写文不易如果对你有帮助的话来一波点赞、收藏、关注吧~
