vue路由

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了单页Web应用(SPA)的概念及优势，并通过Vue.js框架详细阐述了如何实现SPA中的路由功能，包括定义组件、配置路由路径及绑定Vue实例等步骤。

一、关于SPA

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

单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

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

二、vue路由思路

1.引入路由js依赖

点击vue-router 选择3.1.2版本

选择下图中的路径，复制<script>标签

2.定义需求中需要用到的组件

3.定义路由器跳转路径集合

4.得到路由对象

5.将路由与vue进行绑定

6.定义组件存放的位置

7.路由组件跳转触发点

案例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></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.1.2/vue-router.js"></script>
   </head>
   <body>
       
       <div id="app">
           <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',
           router,
           data() {
               return {
                   msg:'嚯嚯哈hi',
               };
           }
       })
   </script>
</html>