vue-导入导出及路由相关
vue---导入导出及路由相关vue 导入与导出vue中 js模块的导入与导出匿名导出与匿名导入具名导出与具名导入补充---导入时:`.js`, `.vue` 这些可以隐藏(不用写),`index`,这个名字也可以省略案例---使用`省略index.js`的方法来简写多层级导出补充`console.log()`与`console.dir()`的区别动态的异步导入---懒加载动态的异步导入---pr
·
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 : '对应路由的名字'}"
动态的-nameto="{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}
更多推荐
已为社区贡献8条内容
所有评论(0)