SPA

SPA是什么

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅

SPA实现思路和技术点

ajax
锚点的使用（window.location.hash #）
hashchange 事件 window.addEventListener(“hashchange”,function () {})
监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
原本用作页面内部进行跳转，定位并展示相应的内容

通过vue的路由可实现多视图的单页Web应用(基于html的SPA)

引入依赖库

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.js"></script>

创建自定义组件，例如：Home和Abort组件

const Home=Vue.extend({template:'<div><h2>Home</h2><div>Home页面的主要内容</div></div>'});
const About=Vue.extend({template:'<div><h2>About</h2><div>About页面的主要内容</div></div>'});

注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件
注2：也可以用以前的方式创建和获得组件，效果也是一样的

   Vue.component("button-counter", {...});//创建组件var ButtonCounter = Vue.component('button-counter');//获得组件

定义路由(即路线)

var routes=[{name:'home',path:'/home',component:Home},{name:'about',path:'/about',component:About}];

注1：根路径“/”

创建路由器实例,然后传 routes 配置

const router=new VueRouter({routes:routes});

注1：route和router的区别
route：路线
router：路由器
路由器中包含了多个路线
5. 创建和挂载根实例。

var vm=new Vue({//el:'#app',data:function(){return{title:'Hello Vue!',ts:new Date().getTime()                           }},router:router,methods:{prev:function(){this.$router.go(-1);},next:function(){this.$router.go(1);},push:function(){this.$router.push({name:'home'});}               }}).$mount('#app');

前面使用RouterLink和RouterView组件导航和显示

  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><!-- 通过传入 `to` 属性指定链接. --><router-link to="/home">go to Home</router-link><!-- 使用RouterView组件显示. --><router-view></router-view>

<div id="app"><p>{{title}} {{ts}}</p><div><router-link to="/home" replace>首页</router-link><router-link to="/about">关于我们</router-link></div><div><button @click="prev">前一页</button><button @click="next">后一页</button><button @click="push">指定页面</button></div><div><router-view></router-view></div></div>

router-link相关属性

to
表示目标路由的链接

 <router-link to="/home">Home</router-link><!-- 字符串 --><router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->

replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

  <router-link :to="{ path: '/home'}" replace></router-link>vue中导航中的后退-前进-编程式导航this.$router.go(-1) ：代表着后退   this.$router.go(1)：代表着前进this.$router.push({    切换到name为home的路由name:'home'});

append

<bese href="${pageContext.request...}/">
<script type="..." href="/EasyUI/jquery.js"></script>
<link src="....css">

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

 <base herf="${pageContext.request.contextPath}/"/>base标签作用于head标签之间在link和script标签中的href和src属性之前加入<base href="/vue04/"><script src="js/vue.js">base中href+script标签中的src    /vue04/js/vue.js<router-link :to="{ path: 'relative/path'}" append></router-link>

有时候想要渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
```
  <router-link to="/foo" tag="li">foo</router-link><li>foo</li>
```
active-class
设置链接激活时使用的 CSS 类名。可以通过以下代码来替代
exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

Router Link 1

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script type="text/jscript" src="js/vue.js"></script> --><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.js"></script></head><body><!--  --><div id="app"><p>{{title}} {{ts}}</p><div><router-link to="/home" replace>首页</router-link><router-link to="/about">关于我们</router-link></div><div><button @click="prev">前一页</button><button @click="next">后一页</button><button @click="push">指定页面</button></div><div><router-view></router-view></div></div></body><script>//注册自定义组件const Home=Vue.extend({template:'<div><h2>Home</h2><div>Home页面的主要内容</div></div>'});const About=Vue.extend({template:'<div><h2>About</h2><div>About页面的主要内容</div></div>'});//定义路由路径var routes=[{name:'home',path:'/home',component:Home},{name:'about',path:'/about',component:About}];//定义路由器const router=new VueRouter({routes:routes});var vm=new Vue({//el:'#app',data:function(){return{title:'Hello Vue!',ts:new Date().getTime()                         }},router:router,methods:{prev:function(){this.$router.go(-1);},next:function(){this.$router.go(1);},push:function(){this.$router.push({name:'home'});}               }}).$mount('#app');</script>
</html>

vue路由SPA的介绍相关推荐

Vue 路由懒加载——介绍以及遇到的问题
使用路由懒加载的原因当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. ...
php spa结合,vue路由嵌套SPA的实现方法
这次给大家带来vue路由嵌套SPA的实现方法,vue路由嵌套SPA实现的注意事项有哪些,下面就是实战案例,一起来看一下. 本文为大家分享了路由嵌套的SPA实现的步骤: A(/a)组件需要嵌套B组件(/ ...
微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
框架技术Vue --- 路由、后台管理系统页面
Vue框架内容管理前端路由前端路由的工作方式实现简易的前端路由 created中window.onhashchange vue-router基本使用 router-link的hash地址不需要 ...
Vue路由与无痕浏览（replace）
SPA介绍: SPA是什么:单页Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的We ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
vue路由匹配实现包容性_我们甚至没有进行包容性的讨论
vue路由匹配实现包容性科技行业需要更加包容女性和有色人种. 这是关于拥有最大的人才库以吸取卓越的经验. 可悲的是,大多数讨论,甚至是倡导更具包容性的文化讨论,本身都是分裂的. 我们都是个人我们都 ...
vue 路由知识点梳理及应用场景整理
最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理说实话,路由我一直也就 ...

vue路由SPA的介绍

路由SPA

SPA