vue同一个页面可以有多个router-view
Vue 页面 可以 多个 View Router 同一个
2023-09-11 14:19:37 时间
分别给router-view定义一个name,默认显示的可以不用定义
自己先在components文件夹内写4个组件,准备放入4个router-viewer标签,我的分别是
containerLeft.vue
containerRight.vue
containerTop.vue
containerBottom.vue
app.vue
<template> <div id="app"> <!-- <img src="./assets/logo.png"> --> <!-- <container-Left/> --> <router-link to="/HelloWorld" > 222 </router-link> <router-view/> <router-view name="left" class="area left"/> <router-view name="right" class="area right"/> <router-view name="logo" class="area "/> <router-view name="bottom" class="area bottom"/> </div> </template> <script> import containerLeft from './components/containerLeft.vue' export default { name: 'App', components:{ containerLeft, } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; /* margin-top: 60px; */ } .area{ width: 400px; height:400px; border:1px red soild; position: absolute; top:20px; z-index: 1002; } .left{ left:0px; top:100px; } .right{ right: 0px; } .bottom{ top: 90%; width: 100%; height: 30px; } </style>
路由文件router/index.js 或router.js
核心:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Veaflet from '@/components/Veaflet' import containerLeft from '@/components/containerLeft' import containerRight from '@/components/containerRight' import containerTop from '@/components/containerTop' import containerBottom from '@/components/containerBottom' import lefttree from '@/components/lefttree' Vue.use(Router) // 创建一个路由器实例 // 并且配置路由规则 const router = new Router({ routes: [ { path: '/', name: 'Veaflet', meta:{title:'Veaflet'}, components:{ default: Veaflet, left:containerLeft, right:containerRight, logo:containerTop, bottom:containerBottom } }, { path: '/HelloWorld', name: 'HelloWorld', meta:{title:'HelloWorld'}, component: HelloWorld }, { path: '/containerLeft', name: 'containerLeft', meta:{title:'containerLeft'}, component: containerLeft }, { path: '/lefttree', name: 'lefttree', meta:{title:'lefttree'}, component: lefttree } ] }) //修改动态网页标题 beforeEach 导航钩子,路由改变前触发 router.beforeEach((to,from,next) =>{ //window.document.title = to.meta.title; window.document.title = to.name; next(); }) router.afterEach((to,from,next) =>{ window.scrollTo(0,0); }) export default router;
运行效果如图:
转 :https://www.cnblogs.com/yingyigongzi/p/10827156.html
参考:https://blog.csdn.net/u011615787/article/details/80075240
相关文章
- Vue笔记:引入animate.css
- 基于vue-cli搭了一个多页面应用的空脚手架
- 4-restfulapi的介绍,vue代码结构
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3: 裁剪图片的一部分并保存(vue@3.2.37)
- vue.js3: json格式化(vue@3.2.37 / vue-json-pretty@2.1.1)
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- Vue computed属性
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
- vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框
- nginx 、vue - nginx同一个端口配置多个vue工程 和 vue 配套打包具体配置 教程
- vue+elementUi实现将数字转化为 对应的字符串内容
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- vue.js中引入图片
- ESLint在vue中的使用
- Vue中vue-i18n结合vant-ui实现国际化
- 095:vue+openlayers 地图上添加网格线 (示例代码)
- Vue(十)vuex
- Vue(八)vue 脚手架、脚手架创建项目示例
- 返回顶部vue、监听页面滚动(整理)
- 基于Java+SpringBoot+Vue前后端分离酒店管理系统设计与实现
- SpringBoot 和 Vue 解决页面日期时间控件问题
- Vue基本语法