前言

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

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

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

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

SPA的概念

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

那么这样有什么缺点呢？

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

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

SPA(single page application，SPA）

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

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

路由的创建

先理清思路：

先将需要用到的组件写好。
给写好的组件合成一个路由（规划路线）。
将合成好的路由放到路由器中。
将路由器挂载在vue的实列上。
定义瞄点（body）
尝试跳转 (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概念】的更多相关文章

四、vue前端路由（轻松入门vue）
轻松入门vue系列 Vue前端路由七.Vue前端路由 1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用基本使用 ...
基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
vue（5）—— vue的路由插件—vue-router 常用属性方法
前端路由看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由二.Vuex状态管理三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
vue嵌套路由 && 404重定向
第一部分: vue嵌套路由嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...
Vue 前端路由 vue-router
1.前端路由后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...
vue嵌套路由与404重定向实现方法分析
第一部分: vue嵌套路由嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...
vue的路由配置
路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, ...
VUE：路由
VUE:路由一.说明 1)官方提供的用来实现SPA的vue插件 2)github:https://github.com/vuejs/vue-router 3)中文文档:http://router.v ...

随机推荐

WINDOWS 安装ZeroMQ
zmq看起来很好用,但是安装起来不是一般麻烦.原来以为java绑定会提供jar包直接可使用,但是官网没有提供已经编译好的库文件和jar.多么的不方便啊!最终还是要自己动手编译! 安装java版本的zm ...
使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库在线访问初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
移动app商城UI模板（仿淘宝）
该商城UI模板是仿照手机淘宝,实现了搜索商品-查看商品详情-加入购物车-结算的流程,共7个页面,由于没有数据库,所有页面上的数据都来自tempData.cs及tempPro.cs ,具体页面参考如下 ...
java8中stream常用方法详解
map: 用作类型转换如把集合里面的字符串转为大写,或者一个对象的集合取几个字段转为新的对象集合filter: 过滤符合条件的集合元素保存下来,不符合条件的去掉flatMap:合并集合,比如Lis ...
《ElasticSearch6.x实战教程》之分词
第四章-分词下雨天留客天留我不留本打算先介绍"简单搜索",对ES的搜索有一个直观的感受.但在写的过程中发现分词无论如何都绕不过去.term查询,match查询都与分词息息相关, ...
C4.5和ID3的差别
C4.5和ID3的差别决策树分为两大类:分类树和回归树,前者用于分类标签值,后者用于预测连续值,常用算法有ID3.C4.5.CART等. 信息熵信息量: 信息熵: 信息增益当计算出各个特征属 ...
阿里云服务器连接以及centos 搭建 web java环境（linux java部署 tomcat部署）
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近弄了个试用阿里云服务器倒腾了半天终于部署好,分享一下. 1.登入阿里云打开你申请的是云服务器的实例: 点击重置密码---重置密码后重启服务器才 ...
什么是WebP以及如何在WordPress中使用WebP图像
图像通常是缓慢加载网页的最大原因之一.它们不仅减慢了加载时间,而且还可以占用服务器上的大量空间和资源.仔细选择文件类型并压缩它们有助于降低加载速度,但它们只能在图像质量受损之前进行优化.另一种选择是使 ...
从国际象棋与象棋的走法差异，再趣说IT人提升能力和增收方式
之前我写过篇博文,用象棋的思维趣说IT人的职业发展和钱途,发现象棋中的一些思维能应用到我们程序员平时的职业发展中. 当从大学毕业的程序员干个五六年以后,也达到了高级开发的水平,工作环境应该能摆脱动荡, ...
剖析std::function接口与实现
目录前言一.std::function的原理与接口 1.1 std::function是函数包装器 1.2 C++注重运行时效率 1.3 用函数指针实现多态 1.4 std::function的接 ...

【Vue的路由，SPA概念】

前言