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获取和设置表单元素的方法
Feb 14 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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 中英文语言转换类代码
2011/08/11 PHP
php中opendir函数用法实例
2014/11/15 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python关闭windows进程的方法
2015/04/18 Python
Python探索之自定义实现线程池
2017/10/27 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
简单了解python的内存管理机制
2019/07/08 Python
python3字符串操作总结
2019/07/24 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
编辑找工作求职信分享
2014/01/03 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
事业单位个人总结
2015/02/12 职场文书
初中毕业生自我评价
2015/03/02 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python