vue 实现把路由单独分离出来


Posted in Javascript onAugust 13, 2020

建立一个 router.js 文件

引入

import Vue from 'vue'
import VueRouter from 'vue-router'
 
import Home from '../components/home/home.vue'

然后注册

Vue.use(VueRouter);
const router = new VueRouter({
 mode : 'history',
 base: __dirname,
  routes: [
  {
    path: historyUrl + '/',
    component: Home,
    name : '主页'
  },
]}

最后暴露出云

export default router

在main.js 里面直接引入然后就可以用了

import router from './main/router.js'
const app = new Vue({
 router : router,
 watch : {
  '$route' (to,from,next){
   //console.log(to) //路由监听
   //console.log(from)
  }
  },
 render : h => h(App)
}).$mount('#app');

别的 js 文件如果要调用 router 方法,直接像 main.js 一样引入直接用就可以了

补充知识:vue.cli3设置单独路由页面全屏切换

不是全屏的时候

vue 实现把路由单独分离出来

是全屏的时候

vue 实现把路由单独分离出来

首先思想:获取当前路由页面的节点,对的节点操作定位,脱离文档流,top:0,;left:0;

1.用ref获取当前路由页面最大的div,也就是template包的第一个div,也可以是其他的

<template>
 <div ref="index"> //ref标识
   <Title :refDome='refDome'></Title>
 </div>
</template>

2.如果要把节点从父组件传到子组件的话,在data里面定义一个值,然后在mounted赋值,在传给子组件(如果没有子组件直接跳过2,直接看3)

父组件

<template>
 <div ref="index">
   <Title :refDome='refDome'></Title> //这里把data的值转给子组件Title 
 </div>
</template>
<script>
import Title from '../components/title'
export default {
  components:{
    Title
  },
  data(){
    return{
      refDome:null
    }
  },
  mounted(){
    this.refDome = this.$refs.index //在这里给data赋值,记得要在mounted赋值
  }
}

子组件props接收值

<script>
export default {
 props: ['refDome'],
}
</script>

3.然后在切换全屏的按钮上绑定@click事件,在点击当时操作节点,在data里面设置一个screen值为1,为了来回切换

// 点击切换全屏
  handleFullScreen() {
   if (this.screen % 2 == 0) {
    this.refDome.style.position = 'static'
    this.screen++
   } else {
    this.refDome.style.width = '100%'
    this.refDome.style.height = '100%'
    this.refDome.style.position = 'absolute'
    this.refDome.style.top = '0'
    this.refDome.style.left = '0'
    this.refDome.style.zIndex = '10'
    this.refDome.style.background = '#fff'
    this.screen++
   }
  },

以上这篇vue 实现把路由单独分离出来就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery可见性过滤选择器使用示例
Jun 24 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JS删除String里某个字符的方法
Jan 06 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue项目接口域名动态获取操作
Aug 13 #Javascript
vue接通后端api以及部署到服务器操作
Aug 13 #Javascript
vue打包npm run build时候界面报错的解决
Aug 13 #Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 #Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 #Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 #Javascript
js实现幻灯片轮播图
Aug 14 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
YII框架常用技巧总结
2019/04/27 PHP
JS中style属性
2006/10/11 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
vue仿element实现分页器效果
2018/09/13 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python实现猜拳游戏项目
2020/11/30 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
.net软件工程师面试题
2015/03/31 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
生物制药专业求职信
2014/03/11 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript