【Vue的路由，SPA概念】
前言
本章是为了以后实现前端页面的搭建而写的，
重点在于如何实现 单页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 ...
随机推荐
- 利用LDAP操作AD域
LDAP操作代码样例 初始化LDAP 目录服务上下文 该例子中,我们使用uid=linly,ou=People,dc=jsoso,dc=net这个账号,链接位于本机8389端口的LDAP服务器(ld ...
- Redis图形化客户端管理软件推荐
Redis是一个超精简的基于内存的键值对NOSQL数据库(key-value),一般对并发有一定要求的应用都用其储存session,乃至整个数据库.不过它公自带一个最小化的命令行式的数据库管理工具re ...
- Java - 格式化输出JSON字符串的两种方式
目录 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 1.2 Java示例代码 2 使用谷歌的gson 2.1 项目的pom.xml依赖 2.2 Java示例代码 1 使用阿里的fa ...
- 数据结构-堆栈和队列最简单的实现（Python实现）
OK,上篇博客我们介绍了双向链表以及代码实现,这篇文章我们来学习堆栈和队列. 队.栈和链表一样,在数据结构中非常基础一种数据结构,同样他们也有各种各样.五花八门的变形和实现方式.但不管他们形式上怎么变 ...
- Python 含小数的十、二进制相互转换
''' 二进制->十进制:bTod 整数部分:a乘以2的n次方(n:a后面的整数位数) 小数部分:a乘以2的-n次方(n:a是小数点后几位) 十进制->二进制dTob 整数部分:短除法(除 ...
- Java编程思想：利用内部类实现的工厂模式
public class Test { public static void main(String[] args) { Factories.test(); } } /* 设计模式之禅中的工厂模式是这 ...
- [剑指offer] 10. 旋转数组的最小数字
题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 思路: 利用dp[i]保存盖2*i的矩形有多少种办法. 通过 ...
- [leetcode] 234. Palindrome Linked List (easy)
原题 回文 水题 function ListNode(val) { this.val = val; this.next = null; } /** * @param {ListNode} head * ...
- Java EE.JSP.动作组件
常见的JSP动作组件有以下几种: 1)<jsp:include>:在页面被请求的时候引入一个文件 2)<jsp:param>:在动作组件中引入参数信息 3)<jsp:fo ...
- Java EE.Servlet.处理请求
Servlet的核心工作便是处理客户端提交的请求信息,生成动态响应信息返回客户端. 1.请求参数 POST方法一般用于更新服务器上的资源,当时用POST方法时,提交的数据包含在HTTP实体内,而GET ...