Vue之路由（SPA开发模式）

最新推荐文章于 2025-02-28 20:01:27 发布

原创最新推荐文章于 2025-02-28 20:01:27 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

VUE 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了单页应用（SPA）的概念，优势以及如何使用Vue.js实现SPA的路由。通过讲解SPA的工作原理，展示了如何利用ajax、锚点和hashchange事件进行页面动态更新。详细阐述了Vue-router的使用步骤，包括引入依赖、定义组件、配置路由、挂载路由器，以及在HTML中创建路由链接。最后提到了无痕游览作为课外拓展话题。

一、什么是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>