vue2.0 router-view解决办法以及自定义v-header

最新推荐文章于 2024-05-15 10:00:04 发布
最新推荐文章于 2024-05-15 10:00:04 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： vue 前端  移动端 文章标签： vue-router渲染   自定义 v-header
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fate_zrr/article/details/79687955
版权
main.js配置// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'impor...
摘要由CSDN通过智能技术生成

main.js配置


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


app.vue 配置


<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab"
最低0.47元/天 解锁文章
fate_zrr
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义view_开关按钮
05-24
android之自定义view，点击图片按钮或拖动图片按钮控制开关，一起学习吧。
关于父子组件，router-view和自定义组件名。
zcs123ok的博客
06-28 2624
        做了这么多路由跳转了，但是今天下午突发奇想，写一个父子组件以及自定义组件跳转的小例子。我理解的，当需要点击按钮路由跳转的时候，用router-view，当作为默认子组件，只是显示的时候用自定义组件名。项目地址：https://github.com/nihaohahahanihao/smailPorject效果图：    图一：首页进去：        图二：点击上边按钮二：    ...
探索Vue-head：动态管理HTML头部信息的高效工具
最新发布
gitblog_00022的博客
05-15 326
探索Vue-head：动态管理HTML头部信息的高效工具 项目地址:https://gitcode.com/ktquez/vue-head 在前端开发中，优化网页元数据（如标题、描述和图标）的管理和更新是一项重要的任务。为此，我们向您推荐一款小巧而强大的Vue.js插件——Vue-head。这款插件能以简单直观的方式帮助您操作页面标签内的元素。 项目介绍 Vue-head是受HEAD启发而创建的，...
基于vue2.0自定义实现Router(简单版)
qq_44472790的博客
02-23 1049
解析：Router是一个插件 内部做了什么？ 1.router-view 和 router-link组件的实现 2.install：this.$router.push() 跳转 实现router-view思路：利用vue的响应式 基于vue2.0自定义实现Router(简单版) 在demoTools/components文件中定义两个组件 1.about.vue中 <template> <!--about组件--> <div>欢迎来到about页面<
vue高仿饿了么项目学习笔记之二:头部header组件的实现
FeilxChioa的博客
04-01 669
1.Vue-resource应用 在父组件APP.vue的钩子函数created使用vue-resource来ajax请求/api/seller，将数据赋值给vue实例的seller对象，并传值给子组件header渲染。 2.外部组件header组件 开始写header组件 声明props: ['seller']属性，将app.vue中ajax请求到的seller传值给header...
Vue项目使用自定义组件
ChengR666的博客
04-29 311
如何使用自定义组件 1.创建组件,三部分template/script/style 2.在路由配置文件(默认router/index.js)中导入组件并配置路由,即可 import Hello from ‘@/components/Hello’ //导入组件 { //配置路由 path: ‘/hello’, name: ‘Hello’, component: Hello } 3.浏览器输入URL:http://localhost:8080/#/hello 在路由视图就显示了自定义的hello组件 4.页面
在Vue中通过vue-router实现命名视图
01-08
在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示 例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径...
Vue中通过vue-router实现命名视图的问题
10-15
var router = new VueRouter({ routes: [ { path: "/", components: { default: header, left: leftBox, main: mainBox } } ] }); ``` 接下来，在Vue实例的模板中，我们可以使用多个`<router-view>`标签...
Vue-router 切换组件页面时进入进出动画方法
10-18
通过这种方式，我们可以自定义Vue-router在切换组件时的动画效果。需要注意的是，`position: absolute`的使用是为了让组件在动画过程中不占用实际空间，从而实现平滑的页面切换。 总的来说，Vue-router的组件页面...
router-view复用路由的抽离
06-25
本文将深入探讨路由的注意事项，特别是涉及二级、三级路由的引用，以及如何通过合理抽离来实现`router-view`的复用。 首先，让我们理解Vue Router的基本概念。Vue Router是Vue.js官方的路由管理器，它允许我们定义...
vue-router 学习快速入门
08-31
<router-view name="header"></router-view> <router-view name="main"></router-view> <router-view name="hero"></router-view> <router-view name="footer"></router-view> ``` 最后，Vue Router 支持组件懒加载...
Vue2中的各种自定义组件
ylhsuper的博客
11-09 1366
复制到页面看下效果。 --> --> --> .red{color: #f00;} 模板测试1
vue中headers是什么_【vue】饿了么项目-header组件开发
weixin_39546312的博客
12-22 1129
1.数据传递的理解在App.vue中用到了header组件，首先注册组件components: {'v-header': header}然后才能引用:seller="seller"的意思是将seller对象传递给v-header中的seller，而v-header中从哪里获得seller呢？通过props从父组件中获得，且要指定数据类型export default{props: {seller: ...
Vue：关于router-view的命名视图、传参、自定义事件
Litt_White的博客
04-03 2783
目前根据项目要求，需要实现这么一个需求：（1）一级目录在顶部，二级目录在侧边，右边是main主要内容（2）main主要内容包含：固定的地图组件，以及left，bottom，right组件（3）left，bottom，right组件根据二级菜单的点击，是可变的，（4）在二级菜单中可能会使用同一地图组件（保活），也可能不会展示地图组件（5）left，bottom，right组件要实现跟地图组件的通信。
webpack 相对路径配置
Daisy
05-06 2646
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router...
axios封装及使用2
真真的博客
04-30 175
npm install axios --save npm install ant-design-vue --save//引入组件 npm install moment --save//引入日期格式 ** ## main.js ** // The Vue build version to load with the `import` command // (runtime-only or st...
Vue 父子组件传值
zq爱生活爱代码的博客
11-13 154
/* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2、在子组件里面通过 props接收父组件传过来的数据 */ * 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-h...
Vue 自定义header
weixin_30342209的博客
06-25 1206
第一种，全局设置： Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第二种，拦截器设置 Vue.http.interceptors.push((request, next) => { request.headers.set('token', token); //setting request.h...
Vue（二）header组件开发
柠檬麻麻
01-19 4547
一、 header 组件开发 之数据的传递 1. App.vue 引入组件 import header from './components/header/header' 2. App.vue 中注册组件 export default { components:{ v-header:header } } 3. 使用组件
vue router-view路由详解
05-13
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便地在单页应用中管理应用的路由。 在使用 Vue Router 进行路由管理时，我们需要用到它的一个重要组件 router-view。router-view 可以理解为路由的容器，用于显示当前路由对应的组件。 下面我们来详细介绍一下 router-view 的使用方式和相关属性。 ### 基本用法 在 Vue Router 中使用 router-view 很简单，只需要在需要展示路由组件的地方加上 <router-view></router-view> 标签即可。 例如，我们有一个路由配置如下： ```js const routes = [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] ``` 在需要展示路由组件的地方添加 <router-view></router-view> 标签： ```html <template> <div> <router-view></router-view> </div> </template> ``` 这样，当路由为 '/' 时，会显示 Home 组件；当路由为 '/about' 时，会显示 About 组件。 ### 嵌套路由 在 Vue Router 中，我们可以使用嵌套路由来实现复杂的路由配置。当我们需要在一个父路由下展示多个子路由时，可以使用嵌套路由。 例如，我们有一个父路由 '/user'，下面有两个子路由 '/user/profile' 和 '/user/settings'，路由配置如下： ```js const routes = [ { path: '/user', component: User, children: [ { path: 'profile', component: Profile }, { path: 'settings', component: Settings } ] } ] ``` 在 User 组件中，我们需要使用 router-view 来展示子路由对应的组件： ```html <template> <div> <h1>User Page</h1> <router-view></router-view> </div> </template> ``` 这样，当路由为 '/user/profile' 时，会显示 Profile 组件；当路由为 '/user/settings' 时，会显示 Settings 组件。 ### 路由命名视图 在某些情况下，我们需要在同一个页面中展示多个路由组件。此时，我们可以使用路由命名视图来实现。 路由命名视图是一种特殊的 router-view，它可以指定路由组件的渲染位置。 例如，我们有一个路由配置如下： ```js const routes = [ { path: '/', components: { default: Home, header: Header, footer: Footer } } ] ``` 这里我们通过 components 属性来指定每个路由命名视图对应的组件。default 表示默认的视图，也就是没有指定名字的视图。 在需要展示路由组件的地方，我们需要使用 router-view 的 name 属性来指定命名视图的名称： ```html <template> <div> <router-view name="header"></router-view> <router-view></router-view> <router-view name="footer"></router-view> </div> </template> ``` 这样，我们就可以在同一个页面中展示多个路由组件了。 ### 路由过渡动画 在 Vue Router 中，可以通过 transition 组件来给路由切换添加过渡动画。 首先，我们需要在 App.vue 中添加 transition 组件： ```html <template> <div> <transition name="fade"> <router-view></router-view> </transition> </div> </template> ``` 这里我们使用 name 属性来指定过渡动画的名称，fade 是一个自定义的名称。 接下来，我们需要在 CSS 中定义过渡动画： ```css .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } ``` 这里我们使用 opacity 属性来控制元素的透明度，当元素进入或离开时，会触发过渡动画。 至此，我们已经介绍了 router-view 的基本用法、嵌套路由、路由命名视图和路由过渡动画。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值