前言

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

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

随机推荐

Linux安装httpd
一.相关下载 1.httpd下载官网下载:http://httpd.apache.org/ 或者百度网盘链接: https://pan.baidu.com/s/1JPdU28tv6rePKJanB ...
JAVA包装类解析和面试陷阱分析
包装类什么是包装类虽然 Java 语言是典型的面向对象编程语言,但其中的八种基本数据类型并不支持面向对象编程,基本类型的数据不具备“对象”的特性——不携带属性.没有方法可调用. 沿用它们只是为了迎 ...
CDQZ集训DAY0 日记
貌似没发生什么事…… 按照教练员的交代,写一下流水账…… 早上5:30到了机场,然后就默默地坐着飞机到了成都.然后就按预定好的被GXY的父亲的朋友接机(貌似因为觉得GXY和他爸的同学挺像被批判一番). ...
C程序中文标点惹的祸，你可长点儿心吧
想必你在编程时,即使写了一个很小很简短的程序,本以为编译一定不会有问题,自信满满,结果编译完了,编译器给了几个大大的error,比如:error C2018: unknown character'0 ...
[记录]Python高并发编程
========== ==多进程== ========== 要让Python程序实现多进程(multiprocessing),我们先了解操作系统的相关知识. Unix/Linux操作系统提供了一个fo ...
Ubuntu系统安装QQ等软件
1.安装deepin-wine环境:上https://github.com/wszqkzqk/deepin-wine-for-ubuntu页面下载zip包(或用git方式克隆),解压到本地文件夹,在文 ...
SpringBoot学习笔记3
十六:自定义拦截器参考文档 16.1 编写拦截器类 extends WebMvcConfigurerAdapter 并重写WebMvcConfigurerAdapter,如下: package co ...
Android基础知识复习之打开照相机拍照并获取照片
对于我来说,做一件事情: 首先要理清我的思路,我要打开照相机,我能想到的是:在Android中我要打开系统应用,肯定需要一个隐式意图,那就要查询Android照相机的源码,查看并找到意图过滤器的书写方 ...
ieda使用在jsp页面中，有时候会出现不能智能显示方法 idea pageContext.setAttribute
idea使用,出现问题记录: 就比如在 pageContext.setAttribute("user",u);这句打pageContext会智能提示, 但是后面的setAttrib ...
简单分析线程获取ReentrantReadWriteLock 读锁的规则
1. 问题最近有同事问了我一个问题,在Java编程中,当有一条线程要获取ReentrantReadWriteLock的读锁,此时已经有其他线程获得了读锁,AQS队列里也有线程在等待写锁.由于读锁是共 ...

【Vue的路由，SPA概念】

前言