前言

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

重点在于如何实现 单页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. 02(d)多元无约束优化问题-拟牛顿法

    此部分内容接<02(a)多元无约束优化问题-牛顿法>!!! 第三类:拟牛顿法(Quasi-Newton methods) 拟牛顿法的下降方向写为: ${{\mathbf{d}}_{k}}= ...

  2. 【JavaScript】深入理解call,以及与apply、bind的区别

    一.call call有两个妙用 1.继承(我前面的文章有提到用call实现call继承,有兴趣可以看下.https://www.cnblogs.com/pengshengguang/p/105476 ...

  3. Everything-1.4.1.917 绿色版

    Everything是一款搜索软件,可以瞬间搜索到你需要的文件.如果你用过Windows自带的搜索工具.Total Commander的搜索.Google 桌面搜索或百度硬盘搜索,都因为速度或其他原因 ...

  4. Nginx+Tomat8负载后,利用Redis实现Tomcat8的session共享

    网上相应的文章应该都介绍,这里只特别记录下笔者在实操的过程出现的问题.此文件只针对tomcat 8 版本,之前版本可略过. tomcat 8 中的context.xml文件修改,增加以下配置. Jav ...

  5. 前端动画 wow.js 效果

    让花里胡哨的特效变简单 wow.js动画class介绍 引入css样式以及js插件 <link rel="stylesheet" type="text/css&qu ...

  6. Bzoj 1079 着色方案 题解

    1079: [SCOI2008]着色方案 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2237  Solved: 1361[Submit][Stat ...

  7. [Asp.net] C# 操作Excel的几种方式 优缺点比较

    在项目中我们常常需要将数据库中的数据导出成Excel文件 有一次工作中我的目的就是读取Excel到内存中,整理成指定格式 整理后再导出到Excel. 因为我要处理的每个Excel表格文件很大.一个表格 ...

  8. 洛谷P2172 [国家集训队]部落战争 题解

    题目链接:https://www.luogu.org/problemnew/show/P2172 分析: 不要被[国家集训队]的标签吓到,其实这题不是很难. 本题可以对比P4304 [TJOI2013 ...

  9. java反射构建对象和方法的反射调用

    Java反射技术应用广泛,其能够配置:类的全限定名,方法和参数,完成对象的初始化,设置是反射某些方法.可以增强java的可配置性. 1.1 通过反射构建对象(无参数): 例如我们使用 ReflectS ...

  10. [leetcode] 456. 132 Pattern (Medium)

    对一个三个元素以上的数组,如果存在1-3-2模式的组合,则返回true. 1-3-2模式就是值的排序是i<k<j但是下标排序是i<j<k. 解法一: 硬解,利用一个变量存储是否 ...