app.vue，router的index.js

2022-05-01 14:03:35 阅读：175 来源： 互联网

标签：vue app export home router 页面路由加载

template标签的作用
template本身没有很特别的意义，可以了解下html 的template标签
官网以及其他人所描述的“根元素”，是指template标签下的元素，不包括也不是template本身。template只能有一个根元素。
HTML 元素是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。
可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。虽然, 在加载页面的同时,解析器确实处理 <template>元素的内容，这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染。

vue-router 基本使用
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容（Home按钮 => home 内容， about按钮 => about 内容）。也可以说是一种映射。所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

路由中有三个基本的概念 route, routes, router。

1、route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。

2、routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3、router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4、客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的内容来实现的
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。

1、页面实现（html模版中）
在vue-router中, 我们看到它定义了两个标签<router-link>和<router-view>来对应点击和显示部分。
<router-link>就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。
所以 <router-link>还有一个非常重要的属性 to，定义点击之后，要到哪里去，如：<router-link to="/home">Home</router-link>

2、js 中配置路由
首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component。path 指路径，component 指的是组件。如：{path:’/home’, component: home}

你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。

假设我们有如下一个应用：

<div id="app">
<router-view></router-view>
</div>

<router-view>是一个顶级的外链。它会渲染一个和顶级路由匹配的组件。

由于在main.js中import router from './router'语句将默认连接到router文件夹中的index.js文件，或者如上文中的router.js中。

export ，export default 和 import 区别以及用法
export与import
ES6模块主要有两个功能：export和import
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

export与export default
1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要
这样来说其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意第四条，通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

name 在 export default {} 中的作用:
1、name: ‘app’ 相当于一个全局 ID；
2、可以不写；
3、写了可以提供更好的调试信息（官方文档有）。
4、可以理解为是导出的途径。用import App from './App'

router.js基本创建过程
引入 vue-router

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

关于path的定义
入口的页面可以设置path的时候设置为"/"
定义的path和name的区别
path：是路径，还可以有二级路径比如 path: ‘/system/setting’。
name：是名字，就相当于给你的这个 path 起个名字方便记住，也可以不设置 name。
定义 component 指定变量

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验。
而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

vue懒加载
定义：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
使用方法：

component:resolve => require(['@/pages/About'],resolve)

按需加载会在页面第一次请求的时候，把相关路由组件块的js添加上。
非按需加载（预加载）则会把所有的路由组件块的js包打在一起。
当业务包很大的时候建议用路由的按需加载（懒加载）。

标签：vue,app,export,home,router,页面,路由,加载
来源： https://www.cnblogs.com/bashliuhe/p/16212700.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

app.vue，router的index.js