Vue之路由（SPA开发模式）

一、什么是SPA

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

单页面应用程序：

只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取

的数据, 展示在页面中

传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

优势；
减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅

二、SPA实现思路和技术点

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

三、路由实现思路：

1.确保引入Vue.vue-router的js依赖ding

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

3.定义路由跳转路径（let也是es6写法，代表非对象）

4.得到路由对象

5.将路由与vue进行绑定

6.定义组件存放位置，定义锚点

7.路由组件跳转触发点

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Vue路由</title>
   
       <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
       <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.js"></script>
   </head>
   <body>
       <div id="app">
           <h3>{{msg}}</h3>
           
           <router-link to="/Home" replace="">首页</router-link>
           <router-link to="/Abort">本站内容</router-link>
           <router-view></router-view>
       </div>
   </body>
   <script type="text/javascript">
   /* 第二步：定义需求中需要的组件 */
   const Home = Vue.extend({
               template: '<div><p>首页</p><div>首博主所写内容</div></div>'
           });
           const Abort = Vue.extend({
               template: '<div><p>关于本站</p><div>博主相关信息，运营内容</div></div>'
           });
           /* 第三步：添加url与组件的映射关系（组合路由）*/
           let routes=[
               {
                   path:'/',
                   component:Home
               },
               {
                   path:'/Home',
                   component:Home
               },
               {
                   path:'/Abort',
                   component:Abort
               }
           ]
           /*第四步：将路由的集合组合成路由器 */
           const router=new VueRouter({routes});

   new Vue({
       el:'#app',
       //第五步：将路由挂载到vue实例中
       router,
       data:{
           msg:'Vue路由第一课'
       }
   })
   </script>
</html>

呈现效果：

四.无痕游览（课外拓展）

<router-link to="/home" replace="">首页</router-link>

Vue之路由（SPA开发模式）相关推荐

vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
Vue之路由--SPA模式
明确课堂目标: 1. SPA是什么? 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态 ...
Vue 的路由实现 Hash模式和 History模式
Hash 模式: Hash 模式的工作原理是onhashchange事件,Window对象可以监听这个事件... 可以通过改变路径的哈希值,来实现历史记录的保存,发生变化的hash 都会被浏览器给保存 ...
vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
Vue - 去除控制台“你正在开发模式下运行Vue”的警告
目录 1. 警告内容 2. 解决方案 1. 警告内容调试 Vue 代码时,Console 控制台老是有警告,警告内容文字信息如下: You are running Vue in developme ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
java游戏spa,【Vue的路由，SPA概念】
前言本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现单页Web应用因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念总的而言,我们知 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...

Vue之路由（SPA开发模式）

一、什么是SPA

二、SPA实现思路和技术点

三、路由实现思路：

代码如下：

呈现效果：

四.无痕游览（课外拓展）

Vue之路由（SPA开发模式）相关推荐

最新文章

热门文章