SPA（单页面应用）：单页面应用，只有一个完整的页面；当它加载页面时，它不会加载整个页面，而只会更新一个指定容器的内容。单页应用（SPA）的核心之一是：在不重新请求页面的情况下更新视图；vue-router实现的是单页面前端路由。github：https://github.com/Michael-lz...掘金：https://juejin.im/post/5df849...route和router$route是“路由信息对象”，包括path、params、hash,query,fullPath,matched,name等路由参数。$router是“路由实例”对象，包括路由跳转方法、hook函数等。hash模式和history模式hash模式：在浏览器中，符号“#”、#和#后面的字符称为hash，使用窗户。location.hash读取。特点：hash虽然在URL中，但不包含在HTTP请求中；它用于指导浏览器的操作，对服务器端安全无用，哈希不会重新加载页面。历史模式：历史采用了HTML5的新特性；并提供了两个新的方法：pushState()、replaceState()可以修改浏览器历史栈，监听popState事件的状态变化。在hash模式下（http://localhost:8080#home），即使不需要配置，静态服务器也会一直寻找index.html返回给我们，然后vue-router将#后面的字符获取为对前端页面的参数进行改造。在history模式下，我们想要的是：输入http://localhost:8080/home，但是最后返回的也是index.html，然后vue-router会把home作为参数来改造前端页面。那么在nginx中，谁能做到这一点呢？答案是try_files。nginxlocation/{root/data/www/rf-blog-web;索引index.html；try_files$uri$uri//index.html;}ApacheRewriteEngineOnRewriteBase/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-dRewriteRule./index.html[L]node.jsconsthttp=require('http')constfs=require('fs')consthttpPort=80http.createServer((req,res)=>{fs.readFile('index.htm','utf-8',(err,content)=>{if(err){console.log('我们无法打开“index.htm”文件。')}res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})res.end(content)})}).listen(httpPort,()=>{console.log('服务器侦听：http://localhost:%s',httpPort)})switchroutedynamicallychangetitle在app中嵌入h5的混合应用中，iOS系统下部分APP的webview中的title不能通过document.title=xxx修改，因为IOSwebview中的网页标题只加载一次，动态更改无效。1、安装依赖npminstallvue-wechat-title--save2。在main.js3中使用importVueWechatTitlefrom'vue-wechat-title'Vue.use(VueWechatTitle)。配置路由元对象配置title，在路由守卫中监听router.afterEach(route=>{//从路由的meta信息中获取title属性if(route.meta.title){document.title=route.meta.title//如果是iOS设备，使用下面的hack来实现页面标题的Updateif(navigator.userAgent.match(/\(i[^;]+;(U;)?CPU.+MacOSX/)){consthackIframe=document.createElement('iframe')hackIframe.style.display='none'hackIframe.src='/static/html/fixIosTitle.html?r='+Math.random()document.body.appendChild(hackIframe)setTimeout(_=>{document.body.removeChild(hackIframe)},300)}}})4.修改App.vue中的router-viewscrollBehavior使用前端路由，当切换到新的路由时，希望页面滚动到顶部，或者保持原来的滚动位置，就可以了比如重新加载页面。vue-router可以做到，更好的是，它允许你自定义izetheroutewhenswitching页面如何滚动。constrouter=newVueRouter({routes:[...],scrollBehavior(to,from,savedPosition){//返回预期的滚动位置}})scrollBehavior方法接收到和来自路由对象。第三个参数savedPosition当且仅当popstate被导航（由浏览器的前进/后退按钮触发）时才可用。结合keepAlive，如果keepAlive，保存停留的位置：scrollBehavior(to,from,savedPosition){if(savedPosition){returnsavedPosition}else{if(from.meta.keepAlive){from.meta.savedPosition=document.body.scrollTop}返回{x:0,y:to.meta.savedPosition||0}}}keep_alivekeep-alive是Vue提供的一个抽象组件，用于缓存组件以节省性能。由于是抽象组件，所以v页面渲染后不会渲染成DOM元素。当组件切换keep-alive时，会带参数执行组件的activated和deactivated两个生命周期钩子函数包括：字符串或正则表达式。只有匹配的组件才会被缓存。排除：字符串或正则表达式。任何匹配的组件都不会被缓存。include属性表示只缓存name属性为a和b的组件，（注意是组件名，不是路由名）其他组件不缓存。exclude属性表示name属性为c的组件不会被缓存，其他组件会被缓存。要使用$route.meta的keepAlive属性，需要在router中设置router的meta信息。metaexportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:Hello,meta:{keepAlive:false//不需要缓存}},{path:'/page1',name:'Page1',component:Page1,meta:{keepAlive:true//需要缓存}}]})在app.vue中区分缓存和不使用缓存页面<保持活动>
