vue-导入导出及路由相关

数据库 2020-06-28 10:17:35 阅读次数: 0

vue---导入导出及路由相关

vue 导入与导出

vue中 js模块的导入与导出

匿名导出与匿名导入

匿名导出—(默认导出)

  • export default 名字，这里的名字时你定义的方法或者数据的名字
  • 匿名导出只能，一次导出一个，即，不能同时导出两个及以上
export default 名字	// 正确
export default 名字1,名字2	// 错误

// 数据
var name = "momo";
// 方法
function fun() {
	alert("hello world!");
}
// 类
Class Person{
	constructor(name) {
		this.name = name;
	}
	say() {
		alert(this.name)
	}
}
// 将以上的导出
export default name;	// 导出name这个变量，
// 如果，一个js模块中有好几个需要导出的数据时，匿名导出稚嫩更实用一次
// 其他的需要使用具名导出
export default fun;		// 匿名导出函数
export default Person; 	// 匿名导出类

匿名导入

  • 匿名导入跟匿名导出相对应
  • import 自定以的名字 from '地址'
  • 这个导出同样不能一次性导入两个及以上，每次只能导出一个，只能使用一次
  • 自定义的名字：导入时在导入页面中使用时的名字，与匿名导出使得名字可以不一样
  • 地址：即创建数据的文件地址，以及导出的地址
import Name from '../XXXXX.js'	// 与之匿名导出的变量name对应
import Fun from '../XXXXX.js'	// 与之匿名导出的函数fun对应
import Person from '../XXXXX.js'	// 与之匿名导出的类Person对应

具名导出与具名导入

具名导出

  • 当一个js模块里面有喊几个需要导出的数据时，将使用具名导出
  • export {名字1,名字2,名字3,.....} ，使用这种就可以一次性导出多个数据，
  • 名字：即需要导出的数据，变量，类，方法等的名字
  • 匿名导出与具名导出可以共存，使用时郎中方法时，导入的时候需要对应的导入方法
  • 即，匿名对匿名，具名对具名
// 数据
var name = "momo";
// 方法
function fun() {
	alert("hello world!");
}
// 类
Class Person{
	constructor(name) {
		this.name = name;
	}
	say() {
		alert(this.name)
	}
}
var age = 18;
// 具名导出
export {name,Person,fun};	// 同时导出了，所有东西
// 如果，想要的话，匿名导出与具名导出可以共存
export default age;	// 匿名导出

具名导入

  • 具名导入与具名导出对应
  • import {名字1,名字2,名字3,...} from '地址'，这是多个同时导入
  • import {名字} as 别名 from '地址'，这个是单个导入，同时我们可以进行别称
  • import * as 别名 from '地址'，这个*代表导入所有数据名，as ，代表起别名，
  • 访问的时候直接访问别名，别名导出的是一个包含所有对应文件数据方法的对象，所以使用别名.需要的数据
  • 名字：与具名导出的数据的名字完全对应，不能自定义
  • 地址：就是数据所在的文件地址
// 导入
import * as obj from '../module/index.js'	// 全部导出，起别名
import {name} as Name from '../module/index.js'		// 只导出name方法，起别名
import {name,fun,age} from '../module/index.js'		// 同时导出多个方法

补充—可以省略index.js

// 补充
export var name = 'momo';
export var age = 18; 	// 可以这么写来导出两个变量数据，不能分开写，即，先声明后导出

补充—可以文件中导入，再导出，使其成为一个中间的传递文件

// 补充
import {name} from '../module/moduleA/index.js';
var age = 18;
export {name,age}; 	// 将导入的数据与新写的数据同时导出

补充—导入时：.js, .vue 这些可以隐藏（不用写），index，这个名字也可以省略

案例—使用省略index.js的方法来简写多层级导出

  • 如果我们在有些地方可能会有很多，很深层的数据需要导入，
// 以下为index.js文件的内容
import {name} as Name from '../module/modelA/modelB/modelC/.../index.js'
import Person from './moda.js'
import age from './moda.js'
import fun from './modb.js'
// 将所用需要的数据同时导入到index.js文件内，在同时导出
export {Person,fun,name,age};

// 在main.js文件中，我们就可以直接简单的调用了
import {Person,fun,name,age} from './module';	// index.js可以省略

补充console.log()与console.dir()的区别

  • console.log() 打印对应的dom节点
  • console.dir() 以JavaScript节点对象的形式打印

动态的异步导入—懒加载

  • import("地址").then(res => {导入成功时的方法，但是res不是直接就是我们导入的，而是下面的default才是})
  • import("地址").then( ({default : 默认的名字}) => { 这里面可以直接使用，默认的名字})
  • 以上为什么被称为动态的导入？因为可以在任何事件中进行使用
// 导入jQuery
import("./assets/jquery-3.3.1.js")
.then(res => {
	console.log(res);	// res 不是jQuery，而是一个模型，下面的default才是jQuery
	var $ = res.default;
	console.log($);	// 这个才是jQuery
})

// 另一种方法
import("./assets/jquery-3.3.1.js")
.then( ({default : $}) => {
	console.log($);	// 就是jQuery对象
})

动态的异步导入—prefetch，提前加载（将其加载到缓存中，等到所有文件加载完毕时，或者触发时才加载）

  • 使用时需要使用 /* */，进行包裹
  • 参数有：
    • webpackChunkName : "自定义名字"，默认加载文件
    • webpackPrefetch : true 是否提前加载
  • webpack的魔法注释
// prefetch 提前加载，文档加载完毕，有空闲事件
import( /* webpackChunkName : "jquery", webpackPrefetch : true*/"./assets/jquery-3.3.1.js")
.then( ({default : $}) => {
	console.log($);	// 就是jQuery对象
})

导入图片

  • 第一种：相对文件的路径在src属性中访问
<img src="地址" />
  • 第二种：在data中定义的地址，动态的添加图片地址的时候使用require
<img :src="url" />

data() {return {
	url :require("地址") 
}}
  • 第三点：以上只适用于本地图片，网络图片不适用

vue 路由

路由—单页面应用原理

  • 单页面应用（SinglePage web Application SPA）

  • 只有一张web页面的应用，时一种从web服务器加载的富客户端

  • 单页面跳转仅刷新局部资源，公共资源（js,css）仅需加载一次，常用于PC端官网，购物等网站

  • 通过动态的切换div显示与隐藏技术来实现

  • 使用location.hash可以获取对应的路由，然后判断路由的参数进行显示与隐藏对应的页面

  • 简单粗暴版—路由导航原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#app>div {
				display: none;
				border: 1px solid red;
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<a href="#/home">首页</a>	
		<a href="#/about">关于</a>	
		<div id="app">
			<div id="home">首页页面</div>
			<div id="about">关于页面</div>
		</div>
	</body>
	<script type="text/javascript">
		 // 给文档添加事件
		  // 当文档内容加载完毕，默认显示主页
		 document.addEventListener("DOMContentLoaded",function() {
			 home.style.display = "block";
		 });
		// 当hash值发生变化时，执行
		 window.addEventListener("hashchange",function(e) {
			  console.log(location.hash);	// 这个就可以获取hash路由
			  var divs = document.querySelectorAll("#app>div");
			  // 隐藏对应的路由值的页面
			  for(var i = 0; i < divs.length; i++) {
				  divs[i].style.display = "none";
			  }
			  // 获取对应hash路由的值，截取
			  var hash = location.hash.slice(2);
			  // 找到与之hash值对应的元素id的值，使其显现
			  document.querySelector(`#app #${hash}`).style.display = "block"
		 })
	</script>
</html>
  • 较为细致版—路由导航(单页面)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#app div {
				border: 1px solid red;
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<a href="#/home">首页</a>	
		<a href="#/about">关于</a>	
		<div id="app">
			<div id="home">首页页面</div>
			<div id="about">关于页面</div>
		</div>
	</body>
	<script type="text/javascript">
		// 假设的定义组件
		var Home = document.getElementById("home");
		var About = document.getElementById("about");
		// 定义路由
		var router = [
			 {
				 path : "/home",
				 component : Home
			 },
			 {
				 path : "/about",
				 component : About
			 },
		 ]
		 function switchPage() {
			 // 获取hash值,如果没有hash值，就赋值首页
			 var hash = location.hash.slice(1)||"/home";
			 // 遍历所有路由
			 router.forEach( route => {
				 // 所有路由的组件隐藏,vue是直接删除dom
				 route.component.style.display = "none";
				 // 如果hash值与路由的path，显示路由对应的组件，vue的是正则表达式，因为有子路由等
				 if(route.path == hash) {
					 route.component.style.display = "block";
				 }
			 })
		 }
		 // 文档加载完时，执行一次switchPage方法
		 document.addEventListener("DOMContentLoaded",switchPage);
		 // 当hash值拜年话时，也执行切换页面
		 window.addEventListener("hashchange",switchPage);
	</script>
</html>

vue-cli 路由—根组件（App.vue)

  • router-view 存放路由，显示对应路由的东西
  • router-link 路由跳转，相当于超连接a的作用，必须有属性to="路由地址"
<template>
	<div id="app">
		<router-view class="page"></router-view>
		<div class="tabs">
			<router-link class="col" to="/">首页</router-link>
			<router-link class="col" to="/about">分类</router-link>
			<router-link class="col" to="/">星球</router-link>
			<router-link class="col" to="/">购物车</router-link>
			<router-link class="col" to="/">我的</router-link>
		</div>
	</div>
</template>

vue-cli 路由—参数传递—detail页面的实现

  • 使用 path : "/路由名字/:唯一识别的变量",设置路由配置内容
{
    path: '/produce/:id',
    name: 'Produce',
    component: Produce
  },

传参

  • 第一种：固定
  • 设置router-link 中 属性to="/路由名字/参数"，设置传递的参数
<template>
	<div class="category">
		<h1>分类</h1>
		<router-link to="/produce/redmi9">Redmi9</router-link> |
		<router-link to="/produce/10x-4g">10x 4g</router-link>
	</div>
</template>
  • 第二种：动态的设置
  • to="{name : '对应路由的名字'}" 动态的-name
  • to="{path : '对应的路由地址，可以传递查询参数'}"
  • to="{name : ‘对应路由的名字’,params : {唯一标识变量 : ‘值’},query : {查询参数的属性 : ‘值’} }"
<template>
	<div class="category">
		<h1>分类</h1>
		<router-link to="{name : "Produce"}">Redmi9</router-link> |
		<router-link to="{path : "/produce/10x?type=4g"}">10x 4g</router-link>
		<router-link to="{name : "Produce",params : {id : '10x'},query : {type : '4g'}}">10x 4g</router-link>
	</div>
</template>
  • 获取传递的过来的参数—从地址栏中获取参数
  • {{$route.params.唯一识别的变量}}
  • 唯一识别的变量：即，设置路由配置时的唯一识别变量
<template>
	<div class="produce">
		<h1>产品页面--{{$route.params.id}}</h1>	
	</div>
</template>

  • 查询传参—获取唯一标识变量后面的参数

  • 即：to="/produce/redmi9?type=4g"，就是?后面的参数

  • 使用：$route.query.?号后面的参数

  • 传递

<router-link to="/produce/redmi9type=8g">Redmi9</router-link> |
<router-link to="/produce/10x?type=4g">10x 4g</router-link>
  • 获取
<!-- 获取query后面的值 -->
<h1>产品页面--{{$route.query.type}}</h1>

可以打印一下$route，看一看它究竟是什么

  • params 参数
  • query 查询的参数
  • path 不带？后面内容的路由
  • fullPath 全部的路由
  • 等

子路由

  • 在大的路由中添加子路由数据
  • children : [{path : '子路由地址1',component : '子页面的组件名字'},{..},...]
  • 且，子路由地址不需要 /，斜杠代表根
{
    path: '/detail',
    name: 'Detail',
    component: Detail,
	children : [
		// 子路由1
		{path : 'arg',component : Arg},
		// 子路由2
		{path : 'com',component : Com},
	]
  },
  • 子路由的to
<router-link to="/detail/arg">参数</router-link> | 
<router-link to="/detail/com">评论</router-link>

补充—$route 与$router的区别的

  • $router 路由实例，存放有路由切换的相关方法
  • $route 当前路由页面 存放路由页面相关信息

补充—vue路由是如何实现传递数据

  • params 路由参数 eg: /produce/:id $route.params.id
  • query 查询参数 eg: /detail/?name=momo $route.query.name
  • meta 元素 eg: meta : {auth : true}

猜你喜欢

转载自blog.csdn.net/qq_34182705/article/details/106987463
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022