路由

前端路由的目的：在不用请求后端的情况下跳转页面

hash路由

1.通过改变hash值去改变路由
2.通过loacation.hash得到hash值    '#/curriculum'
3.监听事件： hashchange：监听hash的改变做出反应

history路由

1.通过改变hash值去改变路由
2.通过loacation.pathname得到路由    '/md/'
3.监听事件： popstate：监听浏览器操作引起的路由变化，比如浏览器的回退
4.history还有pushState和replaceState去操作路由栈去改变路由
5.history是在h5的基础上新出的，在对IE9一下的支持不如由来已久的hash
6.history需要进行一些nginx配置解决它找不到对应文件时的请求的后端的入口文件

 ## historylocation / {root /var/www;index index.php index.html index.htm;try_files $uri $uri/ /index.html;}

异步组件

为什么使用异步组件？

由于组件过大，从后端拉取某些数据可能要耗时等待，所以我们在一定的条件或者等其他同步组件加载完成之后再异步加载过大的组件，再他加载完成后再使用。（有点类似懒加载）

如何使用异步组件？
vue2.0中

vue.conponent('async-conponent1', function(resolve, reject) {setTimeout(function() {// 向 `resolve` 回调传递组件定义resolve({template: '<div>async-conponent1</div>'})},3000)
})

vue.conponent('async-conponent2', function(resolve, reject) {// 这个特殊的 `require` 语法将会告诉 webpack// ⾃动将你的构建代码切割成多个包，这些包// 会通过 Ajax 请求加载require(['./my-async-component'],resolve)
})

vue.conponent('async-conponent3', () => {// 这个动态导⼊会返回⼀个 `Promise` 对象import('./my-async-component');
})

2.3.0+ 新增

const AsyncComponent = () => ({// 需要加载的组件 (应该是⼀个 `Promise` 对象)component: import('./MyComponent.vue'),// 异步组件加载时使⽤的组件loading: LoadingComponent,// 加载失败时使⽤的组件error: ErrorComponent,// 展示加载时组件的延时时间。默认值是 200 (毫秒)delay: 200,// 如果提供了超时时间且组件加载也超时了，// 则使⽤加载失败时使⽤的组件。默认值是：`Infinity`timeout: 3000
})

const { createApp, defineAsyncComponent } = Vue
const app = createApp({})
const AsyncComp = defineAsyncComponent(() => new Promise((resolve, reject) => {resolve({template: '<div>I am async!</div>'})}))
app.component('async-example', AsyncComp);

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)

import { createApp, defineAsyncComponent } from 'vue'
createApp({components: {AsyncComponent: defineAsyncComponent(() =>import('./components/AsyncComponent.vue'))}
})

异步组件使用时，当判断出即将加载一个异步组件，首先会放一个空node,等异步组件加载完成才将node内容加载进去。

动态组件

为什么要使用动态组件？
就是在页面层级，通过条件的限制选择去使用A组件或者B组件等。。。

异步组件和动态组件的对比

异步组件加载时首先从服务器拿到一个异步的ajax并在加载一个空node，等ajax调用完成从服务器上拉取到组件，组件加载成功后，会替换之前的空node; 而动态组件就是一开始从服务器拿到组件node,它不是从服务器去拉取组件的时机问题，而是页面上的条件是动态的，等条件满足时加载相应的组件

vue前端路由和异步组件相关推荐

Vue前端路由~非常详细哦，不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前 ...
Vue 前端路由基础
Vue 前端路由基础何为路由? 在现代前端开发中,路由是非常重要的一环.但路由到底是什么呢? 对于前后端来说,路由就是URL到函数的映射.通俗地来说,这是从路由的实现原理上来解释路由的(就好比计算机 ...
四、vue前端路由（轻松入门vue）
轻松入门vue系列 Vue前端路由七.Vue前端路由 1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用基本使用 ...
html5怎么改为vue_【面试需要Vue全家桶】一文带你看透Vue前端路由
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js ...
Vue前端路由（Vue-router）
1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由 ...
Vue前端路由~满满的干货
文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前端路由 Vue Router vue-router的基本使用 ...
【面试需要-Vue全家桶】一文带你看透Vue前端路由
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js ...
VUE 前端中如何进行组件化开发？
1.前端里面常说的视图层是什么? 我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层. Vue 的核心库只关注视图层图1: dom对象树结构图2:DOM和CSS ...
用Vue前端路由实现tab栏切换
新建一个app.vue文件,写入下方代码 <template><div class="container"><div class="tab& ...

vue前端路由和异步组件

路由