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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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与SQL注入攻击[二]
2007/04/17 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python 画出来六维图
2019/07/26 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
SQL中where和having的区别
2012/06/17 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
给老师的道歉信
2014/01/11 职场文书
火锅店营销方案
2014/02/26 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
长城英文导游词
2015/01/30 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
警示教育观后感
2015/06/17 职场文书