vue路由实现公共头部/模板

最新推荐文章于 2022-10-31 10:55:41 发布
最新推荐文章于 2022-10-31 10:55:41 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： web # Vue 文章标签： vue javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39590046/article/details/106628258
版权

首先创建公共模版文件
在这里插入图片描述

公共模版中使用 <router-view></router-view> 渲染子页面数据
在这里插入图片描述

然后就可以在这个文件进行公共头部或者导航的编辑了
当然也可以写成组件的形式

在这里插入图片描述
别忘了引入组件
在这里插入图片描述

模板内变量使用的问题：不管怎么样。尽量避免变量全局变量重复 都是没错的

好的下面配置路由
先写一个默认跳转的页面
在这里插入图片描述

然后来配置子页面路由
在这里插入图片描述

这个是首页的模版 就做好啦

如果是使用两套公共头部
就需要先把上面的步骤走一次
然后路由配置薛微有一奈奈的不一样

在这里插入图片描述
好啦 ！打完收工～

戒不掉的艳
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 公共模板_使用Vue写个首页，原来这么简单
weixin_39564853的博客
01-10 3265
全栈的自我修养: 为我们的项目添加首页You can never replace anyone. What is lost is lost.每个人都是无可替代的，失去了便是失去了。前言上篇文章使用 vue ui 创建了项目 kola, 开源代码如下：github: https://github.com/zhangyunan1994/kolagitee: https://gitee.co...
vue 实战 之 饿了吗 页头模板
青梅煮酒论英雄的博客
06-28 1653
header 组件
Vue公共组件调用，公共头部实现自定义内容
Rux子兮的博客
06-22 1682
一、设置公共头部publicHeader.vue <template> <view> <view v-if="sign==0" class="head"> <view class="headText">测试1</view> </view> <view v-if="sign==1" class="head"> <view class="headText">{{parent}}<
Vue-router配置公共头部、尾部
weixin_42080056的博客
09-26 1705
近半年一直在写react，但对Vue的热爱种种不能忘怀，这不昨天群里有小伙伴问到了关于vue-router的一些问题，于是我自己又搭建了一遍，突然就想到了一个问题，今天分享给大家。 相信很多大神在搭建框架的时候都遇到过一个问题，拿PC来说，一般头部都是公共的，你是如何处理？单写一个template作为公共模板？各个页面引用？还是直接在App.vue里面构建出公共的头部和底部，导航用router来......
vue——47-评论的公共路由模板组件 放入 路由组件
肖的博客
10-29 249
1.建立一个公共路由模板组件（评论） comments.vue &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;hello world!&amp;amp;lt;/h1&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; &amp;amp
vue-router默认的首页渲染设置
秋来九月八
11-05 7441
在上述示例中，我们将应用程序的根路径(“/”)与名为 “Home” 的组件相关联。你可以将 “Home” 组件替换为你的应用程序的默认视图或首页组件。请注意，你可以根据你的项目需求配置不同的默认视图，只需确保将其与正确的路径相关联。在 Vue Router 中，默认的首页渲染设置通常是将一个特定的组件与根路径(“/”)相关联，以便在访问应用程序的根 URL 时显示该组件。在上述示例中，根路径(“/”)和"/default"以及"/main"路径都将匹配到相同的路由，即 “Home” 组件。
基于vue的后台管理模板实现代码
02-17
2. **Vue Router**：Vue Router是Vue.js官方的路由管理器，它使得页面间的导航变得简单，通过定义路由规则，我们可以轻松地在不同的组件之间切换，实现前端路由的单页应用（SPA）。 3. **Vuex**：Vuex是Vue的状态...
vue实现后台权限控制系统模板
06-01
在"Vue实现后台权限控制系统模板"这个项目中，我们可以理解这是一个基于Vue.js的后台管理系统的源码实现，旨在提供一套完整的后台权限管理解决方案。 首先，让我们详细探讨Vue.js在权限控制中的应用。Vue.js通过其...
基于Vue的后台管理系统模板
02-18
1. **路由管理**：使用Vue Router进行页面跳转和路由配置，实现单页应用（SPA）的导航功能。 2. **状态管理**：Vuex作为全局状态管理工具，存储和管理组件间共享的状态，确保数据的一致性。 3. **API接口封装**：...
vue中多路由表头吸顶实现的几种布局方式
10-17
在Vue项目中，实现多路由表头吸顶功能是一项常见的需求，尤其在数据展示丰富的界面中，它能提供更好的用户体验。下面我们将详细介绍几种实现方式。 首先，我们需要理解表头吸顶的基本原理：当表格内容滚动到顶部时...
vue 将页面公用的头部组件化的方法
11-30
本篇文章将详细讲解如何在Vue项目中将公共的头部部分组件化。 首先，组件是Vue的核心特性之一，它是一个具有独立功能和状态的自包含单元。组件可以像HTML元素一样在模板中使用，并且可以通过props接收外部数据，...
Vue3入门笔记----实现公共头部样式
panzhixiang
10-31 1694
Vue3实现公共头部组件
vue 配置公共头部(header)
热门推荐
周家大小姐
01-07 2万+
需求:整个项目;每个项目都有头部 但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部; App.vue &lt;template&gt; &lt;div id="app"&gt; &lt;div class="header" v-if="isShowHeader" id="headers"&gt; &lt
关于router-link和router-view
hurley11的博客
11-24 6627
router-link和router-view在同一个vue文件（A.vue）里面，router-link设置路由跳转，router-view根据路由显示组件 在同一个页面中，A.vue组件是全局的页面，B.vue组件和C.vue组件是A页面中的一部分 1，router-link设置路由跳转 <router-link :to="'/url/'"> <li> <a>goto</a> </li> </.
vue配置公用头部、底部，可控制显示隐藏
weixin_47906106的博客
08-25 2365
例如：demo页面不需要显示header，在页面被创建的时候使用(this.$emit)告诉上级不显示header，可以使用 this.$emit(‘header’,false);来控制header不显示。header 和 footer 默认显示，例如某个页面不需要显示header。定义header和footer公共组件并且在App.vue中引用。并且在当前页面写自己的header代码就可以了。
vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏
猿飞梦的博客
07-09 1398
vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和footer默认显示，例如某个页面不需要显示header 可以使用 this.$emit('header',false);来控制header不显示 例如：test页面不需要显示header，在页面被创建的时候广播(this.$emit)告诉上级不显示header， 并且在当前页面写自己的header代码，就可以了 app.vue <...
Vue开发实例（07）之编写头部页面
编程界明世隐的博客
04-27 8130
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 引言 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
vue 办公系统首页样式
clearlove7_2018的博客
06-29 931
首页样式
【Vue】样式
Qxn530的博客
10-17 993
弹出框的样式；子路由显示,点击父路由和子路由高亮的样式；设置标签页类似内边距的样式；获取元素在屏幕中的距离；
用vue写以一个精美公共头部多级导航栏
最新发布
09-20
好的，我会尽力为你提供一些指导。 首先，我们需要在 Vue 组件中定义一个数组来存储导航栏的数据，这个数组可以包含一些对象，每个对象代表一个导航栏项目。每个对象应该有一些属性，例如标题、链接地址、子菜单等。 然后，我们可以使用 Vue 的指令来渲染导航栏。这里我们可以使用 `v-for` 指令来遍历导航栏数据数组，并且使用 `v-bind` 指令来将每个对象的属性绑定到相应的 HTML 元素上。 对于多级导航栏，我们可以再次使用 `v-for` 指令来遍历每个对象的子菜单数组。这样就可以实现多级导航栏了。 下面是一个简单的示例，展示了如何在 Vue 组件中使用这些指令来渲染多级导航栏： ``` <template> <nav> <ul> <li v-for="item in navData" v-bind:key="item.title"> <a v-bind:href="item.url">{{ item.title }}</a> <ul v-if="item.submenu"> <li v-for="subitem in item.submenu" v-bind:key="subitem.title"> <a v-bind:href="subitem.url">{{ subitem.title }}</a> </li> </ul> </li> </ul> </nav> </template> <script> export default { data() { return { navData: [ { title: 'Home', url: '/home', submenu: [ { title: 'About', url: '/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值