前言

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

重点在于如何实现 单页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 ...

随机推荐

kuangbin专题专题二搜索进阶 Escape HDU - 3533
题目链接:https://vjudge.net/problem/HDU-3533 题目分析: 1.人不能经过碉堡; 2.敌军碉堡可能建到我军基地 3.子弹碰到碉堡就没了,说明子弹会被别的城堡给拦截下来 ...
20140115-SqlHelper为什么是静态的
为什么SqlHelper(或工具类)是静态的? 静态构造函数仅调用一次(即只是在程序生命周期中实例一次),在程序驻留的应用程序域的生存期内,静态类一直保留在内存中这样可以减少每次使用的实例过程,就是 ...
学习4:总结# 1.列表 # 2.元祖 # 3.range
列表 -- list 有序,可变的,索引, 作用:存储数据的,支持很多种数据类型定义方式: lst = [1,"alex","黑哥"] 增: append 追 ...
《ElasticSearch6.x实战教程》之简单的API
第三章-简单的API 万丈高楼平地起 ES提供了多种操作数据的方式,其中较为常见的方式就是RESTful风格的API. 简单的体验利用Postman发起HTTP请求(当然也可以在命令行中使用curl ...
Lucene01--倒排索引思想
Lucene01--倒排索引思想 1. 倒排索引的概念: 首先对数据按列拆分存储,然后对文档中的数据分词,对词条进行索引,并记录词条在文档中出现的位置.这样查找时只要找到了词条,就找到了对应的文档.概 ...
前端html+css+JavaScript 需要掌握的单词
前端html+css+JavaScript 需要掌握的单词 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...
TCP端口复用引发的异常,用setsockopt来解决
TCP端口复用引发的异常,用setsockopt来解决我们在并发连接一个服务端时候他会出现这种情况 OSError: [WinError 10048] 通常每个套接字地址(协议/网络地址/端口)只允 ...
cron 表达式的格式了解
cron 表达式的格式 Quartz cron 表达式的格式十分类似于 UNIX cron 格式,但还是有少许明显的区别.区别之一就是 Quartz 的格式向下支持到秒级别的计划,而 UNIX cro ...
pyqt QT设计师制作关于对话框（软件版权申明）
一.实验环境 1.anaconda2 2.5.0 + python2.7 2.pyinstaller3.0 二.操作步骤 2.1 启动designer.exe 2.2 单击“文件” -> “新建 ...
redis的下载与安装（linux版）
redis的下载与安装(linux版) 1.下载路径 https://redis.io/download 2.上传到linux并且解压 3.进入解压之后的redis,并且make && ...

【Vue的路由，SPA概念】

前言