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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
Node.js事件驱动
Jun 18 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
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 已经成熟
2006/12/04 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python flask搭建web应用教程
2019/11/19 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
keras得到每层的系数方式
2020/06/15 Python
Django-imagekit的使用详解
2020/07/06 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
大学生职业规划前言模板
2013/12/27 职场文书
军训心得体会
2013/12/31 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
求职信模板怎么做
2014/01/26 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
python接口测试返回数据为字典取值方式
2022/02/12 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server