前言

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

重点在于如何实现 单页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. 用JAVA打印出棱形

    public class Test { public static void main(String[] args) { //输入行数 print(5); } public static void p ...

  2. android_layout_linearlayout(二)

    android的线性布局linearlayout的研究没有尽头.看了官网关于线性布局的一个例子,捣鼓一阵,发现的迷惑记录在此. 一.先看看官网xml <?xml version="1. ...

  3. Dom4J的基本使用

    初始化数据 <?xml version="1.0" encoding="UTF-8"?> <RESULT> <VALUE> ...

  4. 关于css样式加载的问题

    今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuer ...

  5. 对DatagramSocket的使用实例（java使用UDP进行数据传输）

    今天刚看懂的一点点东西,记录一下,方便自己回顾 客户端: Client.java import java.io.IOException; import java.net.DatagramPacket; ...

  6. <float.h>中DBL_TRUE_MIN的定义和作用

    搬运自己2016年11月22日于SegmentFault发表的文章.链接:https://segmentfault.com/a/1190000007565915 在学习C Prime Plus的过程中 ...

  7. Netty-Pipeline深度解析

    首先我们知道,在NIO网络编程模型中,IO操作直接和channel相关,比如客户端的请求连接,或者向服务端发送数据, 服务端都要从客户端的channel获取这个数据 那么channelPipeline ...

  8. 洛谷P3877 [TJOI2010]打扫房间 解题报告

    首先整理一下条件: 1.恰好进出每个需打扫的房间各一次 2.进出每个房间不能通过同一个门 (其实前两个条件是一回事) 3.要求每条路线都是一个闭合的环线 4.每条路线经过的房间数大于2 让你在一个n* ...

  9. c++小游戏——2048

    #include <stdio.h> #include <time.h> #include <conio.h> #include <windows.h> ...

  10. 新手小白快速登天日记之安装python以及环境变量和pycharm解释器较为详细教程

    Python解释器安装及环境变量配置 Python官方网站:www.python.org 首先打开这个网址,找到downloads选择,因为我是Windows所以下载windows的,因电脑而异 然后 ...