SPA是Single-Page-Application的缩写,翻译过来就是单页应用。
在WEB页面初始化时一同加载Html、Javascript、Css。一旦页面加载完成,SPA不会因为用户操作而进行页面重新加载或跳转,取而代之的是利用路由机制实现Html内容的变换。
优点:
良好的用户体验,内容更改无需重载页面。
基于上面一点,SPA相对服务端压力更小。
前后端职责分离,架构清晰。
缺点:
由于单页WEB应用,需在加载渲染页面时请求JavaScript、Css文件,所以耗时更多。(懒加载等)
由于前端渲染,搜索引擎不会解析JS,只能抓取首页未渲染的模板,不利于SEO。 (服务端渲染等)
由于单页应用需在一个页面显示所有的内容,默认不支持浏览器的前进后退。(路由解决)
hash 路由模式
hash(#)是URL的锚点,代表的是网页中的一个位置,单单改变#后面的部分,浏览器只会滚动到相应的位置,而不会去后端请求网页资源,
也就是说#是用来指导浏览器动作的,对服务器端完全不起作用,HTTP请求中也不包括#;
同时每一次改变#后面的部分,都会在浏览器的访问历史中增加一个记录,当使用浏览器的“后退”按钮的时候,就可以返回上一个位置;
所以说Hash模式是使用锚点值的改变,根据不同的值,渲染指定DOM元素的不同数据。
#后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。每次 hash 值的变化,会触发hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作:
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
}
当你选择mode类型之后,程序会根据你选择的mode 类型创建不同的history对象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
HashHistory有两个方法:HashHistory.push()将新路由添加到浏览器访问历史的栈顶 和 HashHistory.replace()替换掉当前栈顶的路由
因为hash发生变化的url都会被浏览器记录(历史访问栈)下来,从而你会发现浏览器的前进后退都可以用了。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来。
history 路由模式
当我们使用history模式的时候进行页面跳转的时候,其vue-router原理是使用HTML5的新接口pushState和replaceState,
这两个接口的最大的特点就是改变URL地址,但却不刷新页面,注意!!!仅仅改变网址,网页不是真正的跳转了,也不会获取到新的资源,本质上,网页还是停留在原来的页面(index.html)。
举例:
打开首页后,你的URL显示www.xxx.com/home,这时候能正常显示,没问题,此时你进入到注册页,URL此时是www.xxx.com/home/reg,
这个时候,当你点击刷新时,浏览器就会拿着当前的地址www.xxx.com/home/reg去后台请求该资源,后台肯定没有对应的资源,所以就会报404找不到,这样就很明了了!
url中没有#,是全地址,所以 刷新页面 的时候会根据全地址取请求后台,后台也需要做对应的处理,否则页面请求不到就会404,配置apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。
因为HTML5标准发布,多了两个 API,pushState() 和 replaceState()。通过这两个 API (1)可以改变 url 地址且不会发送请求,(2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。
除此之外,还有popState().当浏览器跳转到新的状态时,将触发popState事件.
修改历史状态
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
切换历史状态
包括back,forward,go三个方法,对应浏览器的前进forward,后退back,跳转go操作。 有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
区别:
前面的hashchange,你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误
当用户刷新页面之类的操作时,浏览器会给服务器发送请求,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。
history模式怕啥
不怕前进,不怕后退,就怕刷新,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。
在history模式下,你可以自由的修改path。history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。
当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
abstract 路由模式
1.router
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,包含了所有的路由包含了许多关键的对象和属性。例如history对象
$router.push({path:’/path’}); 本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录
$router.replace({path:’/path’}); 替换路由,没有历史记录
2.route
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
$route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如 “/index/” 。
$route.params
对象,包含路由中的动态片段和全匹配片段的键值对
$route.query
对象,包含路由中查询参数的键值对。例如,对于 /index?id=1 ,会得到 $route.query.id == 1。
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ name:'register',path: '/register', component: register }
]
})
this.$router.push('/login?id=10&name=zs')
或
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login },// 这里不传入对应的参数(:/id/:name) 刷新页面 参数会消失,页面中就丢失了数据
{ name:'register', path: '/register/:id/:name', component: register }
]
})
this.$router.push('/login/12/ls')
或
this.$router.push({name:'register',params:{id:10,name:'lili'}})
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
this.$router.push
跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数,0刷新当前页
window.history.back() window.location.reload()
1非懒加载
import Index from "@/components/index"
const router = new Router({
routes: [
{
path: '/',
name: 'Index'
component: Index,
}
]
})
2懒加载
{
path: "路由路径",
component: () =>
import(/* webpackChunkName: "chunk名称 用于代码分割 " */ "组件路径")
}
const Index = (resolve) => {
import('@/components/index').then((module) => {
resolve(module);
});
};
const router = new Router({
routes: [
{
path: '/',
name: 'Index'
component: Index,
}
]
})
const index = require('@/components/index');
const Index = resolve => require.ensure([], () => resolve(index), 'list');
const router = new Router({
routes: [
{
path: '/',
name: 'Index'
component: Index,
}
]
})
二.路由守卫
const router = new VueRouter({ ... })
//全局前置守卫 常用语验证登录
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
//全局解析守卫 和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
router.beforeResolve((to, from, next) => {
// ...
})
//全局后置钩子
router.afterEach((to, from) => {
// ...
})
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
//路由独享的守卫
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
<template>
...
</template>
export default{
data(){
return{
}
},
// 从另外的组件进入该组件前触发该钩子
beforeRouteEnter(to, from, next) {
console.log("todo before enter");
console.log(this) // 这里获取不到上下文
next(vm => { // next里面有一个回到函数可以获取到上下文,把请求到的数据塞到vue对象中
console.log(vm.id)
console.log(vm.msg)
vm.test();
});
},
// 同一个组件,param不同的是触发,常用与同一个组件当传入不通参数时,展示不同的数据
beforeRouteUpdate(to, from, next){
console.log("todo update enter")
next();
},
// 该组件离开跳转到另外的组件时触发该钩子,常应用于用户表单,当用户填了一部分内容,需要提醒用户是否离开页面
beforeRouteLeave(to, from, next){
console.log("todo leave enter")
if(global.confirm('are you sure')){
next();
}
},
}
当点击切换路由时:beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调