松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 【Vue的路由,SPA概念】

【Vue的路由,SPA概念】

迦娜王
3年前Vue
402 0 0

前言

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

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


路由的使用

1

//就代表着使用Path 名字为Home 的组件



 
 
 
 
 
 
 

  • 文本

    {{msg}}
  • go to Home go to About
【Vue的路由,SPA概念】


router-link的相关属性

replace

加了这个之后就可以消除历史记录。

导航后不会留下 history 记录

go to Home

以及一些跟导航相关的操作:

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

go to Home

渲染

有时候想要 渲染成某种标签,例如 `

  • `。于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航
    foo
     
    
     	
  • foo

  • 总结

    为了以后整合页面,打好基础

    Thanks♪(・ω・)ノ希望对大家有所帮助

    原文地址:https://www.cnblogs.com/liwangwang/p/11300607.html

  • 0
    基于Vue + Element组件库后台管理系统
    上一篇
    最详细的基于webpack的Vue Hello World应用开发步骤
    下一篇
    评论 (0)

    请登录以参与评论。

    现在登录
    聚合文章
    Servicios profesionales Organizaciones
    1年前
    在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
    1年前
    vue3.x reactive、effect、computed、watch依赖关系及实现原理
    1年前
    Vue 3 新特性:在 Composition API 中使用 CSS Modules
    1年前
    标签
    AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
    相关文章
    在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
    vue3.x reactive、effect、computed、watch依赖关系及实现原理
    Vue 3 新特性:在 Composition API 中使用 CSS Modules
    新手必看的前端项目去中心化和模块化思想
    松鼠乐园

    资源整合,创造价值

    小伙伴
    墨魇博客 无同创意
    目录
    重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
    Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
    • 重大新闻
    • Centos
    • CSS
    • Docker
    • ES5
    • ES6
    • Go
    • Java
    • Javascript
    • Linux
    • Mac
    • MySQL
    • Nginx
    • Redis
    • Springboot
    • Tensorflow
    • Vue
    • Vue2.x从零开始
    • Windows
    • 书籍推荐
    • 人工智能
    • 前端资源
    • 后端资源
    • 壁纸
    • 开源项目
    • 测试
    • 论文
    热门搜索
    • jetson nano
    • vue
    • java
    • mysql
    • 人工智能
    • 人脸识别
    迦娜王
    坚持才有希望
    1224 文章
    35 评论
    242 喜欢
    • 0
    • 0
    • Top