前言

本章是为了以后实现前端页面的搭建而写的，

重点在于如何实现 单页Web应用

因为相对于以前的传统多页面web，有很大的缺陷。

那么就必须了解一下Vue的路由设置。

SPA的概念

总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。

那么这样有什么缺点呢？

  1. 每次请求返回的体积太大，加大了服务器的压力
  2. 页面较大的话，会影响页面的加载速度。
  3. 不能提供给用户良好的体验

所以，在以上的缺点的问题在SPA都能解决

SPA(single page application，SPA）

SPA,中每次加载都是获取到自己所需要的特定数据，所以才方便快捷。

所以要用各种组件合成的路由来构建SPA

路由的创建

先理清思路：

  1.  先将需要用到的组件写好。
  2.  给写好的组件合成一个路由（规划路线）。
  3. 将合成好的路由放到路由器中。
  4. 将路由器挂载在vue的实列上。
  5.  定义瞄点 （body）
  6. 尝试跳转 (body)
<script type="text/javascript">

        //定义两个组件

        const Home = Vue.extend({

            template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'

        });

        const About = Vue.extend({

            template: '<div><p>这是一个About组件</p><div>About组件内容</div></div>'

        });

        //定义路由

        //规划路线

        var routes = [{

            path: '/Home',

            component: Home

        }, {

            path: '/About',

            component: About

        }];

        //将路由放入到路由器中

        const router = new VueRouter({

            routes

        });

        new Vue({

            el: '#app',

            router,

            data() {

                return {

                    msg: "hello"

                };

            }

        });

    </script>

路由的使用

<router-link  to="/Home">//就代表着使用Path 名字为Home 的组件

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

        <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>

        <title></title>

    </head>

    <body>

        <div id="app">

            <ul>

                <li>

                    <h3>文本</h3>

                    {{msg}}

                </li>

                <li>

                    <!-- 定义锚点 -->

                    <router-link to="/Home">go to Home</router-link>

                    <router-link to="/About">go to About</router-link>

                </li>

                <li>

                    <router-view></router-view>

                </li>

            </ul>

        </div>

    </body>

</html>

router-link的相关属性

replace

加了这个之后就可以消除历史记录。

导航后不会留下 history 记录

<router-link to="/Home" replace>go to Home</router-link>

以及一些跟导航相关的操作：

　　　　this.$router.go(-1) ：代表着后退

      this.$router.go(1)：代表着前进

      this.$router.push({    切换到name为home的路由

       name:'home'

      });

　　

注意这个只能在vue的实列中使用

 1 new Vue({

 2             el:"#app",

 3             // 将路由器挂载到指定边界

 4             router: router,

 5             data: function() {

 6                 return {

 7                     ts: new Date().getTime()

 8                 }

 9             }，methods:{

10                 doForward:function(){

11                     console.log('doForward方法被调用');

12                     this.$router.go(1);

13                 },

14                 doBack:function(){

15                     console.log('doBack方法被调用');

16                     this.$router.go(-1);

17                 }

18             }

19             });

append

这个也就是改变地址栏的位置

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

<router-link to="/Home" append>go to Home</router-link>

渲染

有时候想要 <router-link> 渲染成某种标签，例如 `<li>`。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

<router-link to="/foo" tag="li">foo</router-link>

 <!-- 渲染结果 -->

 <li>foo</li>

总结

为了以后整合页面，打好基础

Thanks♪(･ω･)ﾉ希望对大家有所帮助

【Vue的路由，SPA概念】的更多相关文章

  1. 四、vue前端路由（轻松入门vue）

    轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...

  2. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  3. vue（5）—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  4. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  5. vue嵌套路由 && 404重定向

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...

  6. Vue 前端路由 vue-router

    1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...

  7. vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...

  8. vue的路由配置

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, ...

  9. VUE：路由

    VUE:路由 一.说明 1)官方提供的用来实现SPA的vue插件 2)github:https://github.com/vuejs/vue-router 3)中文文档:http://router.v ...

随机推荐

  1. 跟着大彬读源码 - Redis 3 - 服务器如何响应客户端请求？（下）

    继续我们上一节的讨论.服务器启动了,客户端也发送命令了.接下来,就要到服务器"表演"的时刻了. 1 服务器处理 服务器读取到命令请求后,会进行一系列的处理. 1.1 读取命令请求 ...

  2. springboot定时任务之旅

    springboot定时任务 假设场景:单体应用的定时任务,假设我们已经有了一个搭建好的springboot应用,但是需要添加一个定时执行的部分(比如笔者遇到的是定时去请求一个接口数据来更新某个表), ...

  3. Python一秒提供Rest接口

    Python一秒提供Rest接口 使用的是Anaconda安装的Python环境; 新建py文件(例如:restapi.py) # -*- coding: utf-8 -*- from flask i ...

  4. [Noi2002]Savage 题解

    [Noi2002]Savage 时间限制: 5 Sec  内存限制: 64 MB 题目描述 输入 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数Ci ...

  5. MyBatis select标签的用法

    From<MyBatis从入门到精通> 第一步,在接口中添加方法: public interface UserMapper { SysUser selectById(Long id); } ...

  6. seleniumGrid分布式远程执行测试脚本

    执行UI自动化测试脚本时,不仅可以在本地执行,也可以远程指定某计算机执行测试脚本,seleniumGrid为我们提供了这类服务,但还需要自己搭建环境. 一.本地计算机需要准备java环境和seleni ...

  7. nginx 的信号量

    参考文章:https://blog.51cto.com/5660061/2380428 nginx 中的信号量: TERM,INT  快速的结束应用程序 ,等同于 kill -9 pid QUIT 优 ...

  8. Shiro在Web环境下集成Spring的大致工作流程

    1,Shiro提供了对Web环境的支持,其通过一个 ShiroFilter 入口来拦截需要安全控制的URL,然后进行相应的控制.      ①配置的 ShiroFilter 实现类为:org.spri ...

  9. Spring MVC + Spring + MyBatis 框架整合

    本文介绍使用SSM框架开发web项目Demo. 一.创建一个web-Poject项目 1.导入相关jar文件至lib下.“相关jar文件” --提取密码 oraw 2.修改web.xml文件 < ...

  10. Jsoup访问https网址异常SSLHandshakeException(已解决)

    爬取网页遇到的目标站点证书不合法问题. 使用jsoup爬取解析网页时,出现了如下的异常情况. javax.net.ssl.SSLHandshakeException: sun.security.val ...