vue 脚手架使用路由
概念:
后端路由:
后端处理URL和页面之间的映射关系 前端发展阶段:
1.后端渲染阶段(以jsp,php为代表,其特点为html代码和后端语言代码混写在一起
2.前后端分离阶段(随着ajax的兴起,后端只提供API来返回数据,前端通过ajax获取
数据,并且可以通过JavaScript将数据渲染到页面中
3.单页面富运用阶段
其实spa最主要的特点是在前后端分离的基础上加了一层前端路由
也就是前端来维护一套路由规则
前端路由的核心是什么呢
改变url,但是页面不进行整体的刷新
路由的使用步骤:
步骤一:安装vue-router
npm install vue-router --save 步骤二:导入路由对象,并且调用Vue.use(VueRouter) 来安装路由功能 步骤三:路由--组件映射配置 步骤四:在vue实例中导入路由实例 步骤五:使用路由,通过<router-link>(显示a标签)和 <router-view>(占位,决定组件渲染在什么位置)




现在的路由是使用哈希模式,太不美观

我们使用html5的history模式,可以去掉其中的/#
这样配置即可

效果如下

vue 脚手架使用路由的更多相关文章
- vue 脚手架关于路由的一点理解
https://router.vuejs.org/zh/ 可以先翻翻文档看看介绍啊,一般我不怎么喜欢看文档,都是直接看人家案例,在回头看文档的,所以学习速度慢很多,希望我以后成为一个爱学习的妹子,比较 ...
- Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...
- Vue脚手架结构及vue-router路由配置
首先官网介绍,用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做 ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue脚手架(vue-cli)安装总结
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- 使用vue脚手架(vue-cli)快速搭建项目
一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...
随机推荐
- k8s集群PHP环境使用
一.环境介绍 k8s版本: 1.15.2 存储: 阿里云NAS 测试代码: wordpress 二.下载wordpress和创建好数据库等 1.下载wordpress wget https://cn. ...
- 我说我了解集合类,面试官竟然问我为啥HashMap的负载因子不设置成1!?
在Java基础中,集合类是很关键的一块知识点,也是日常开发的时候经常会用到的.比如List.Map这些在代码中也是很常见的. 个人认为,关于HashMap的实现,JDK的工程师其实是做了很多优化的,要 ...
- jsplumb 常用事件
1. jsPlumb.getAllConnections() 获取所有连接线2. jsPlumb.deleteEveryConnection(); 清空所有连接线3. jsPlumb.deleteCo ...
- Qps从300到1500的优化过程
最近压测一项目,遇到的性能问题比较典型,过程记录下来,给大家做定位调优参考: 表象: 单接口负载测试,qps最高到300,响应时间200ms,应用cpu达到90%以上,8c机器,如下图,写到这里可能有 ...
- js this是什么?[多次书写]
前言 以前的时候,我写了一个关于js this的博客,写的非常复杂,分析了各种情况. 现在我想简化. 如果你有后台基础,专门去理解过this,那么请忘记. 这东西是有口诀的: 在方法中,this 表示 ...
- 远程服务器返回错误:(414)Request-URI Too Large
近期因为疫情原因,一直是在家办公了,也导致了和同事对接接口上出现了很多小问题,这也从侧面反映出我个人对项目的设计不全面. 上面是对接接口时产生的一个问题:远程服务器返回错误:(414)Request- ...
- ORACLE ANALYZE使用小结
ANALYZE的介绍 使用ANALYZE可以收集或删除对象的统计信息.验证对象的结构.标识表或cluster中的行迁移/行链接信息等.官方文档关于ANALYZE功能介绍如下: · ...
- centos7系统启动流程
前提:pc主机,MBR架构 第一步:post(power on system test)加电自检. pc机的主板上有个rom芯片(CMOS),加电后,cpu去找这个raw,然后读取里面的指令,检测机器 ...
- winform重绘控件边框
首先添加一个用户控件 对于重绘边框有三个需要考虑的东西 1:是否显示边框 2:边框颜色 3:边框宽度 所以定义三个私有变量 /// <summary>/// 是否显示边框/// </ ...
- Nginx虚拟主机配置(20200202)
一台机器上跑多个站点,即多个域名 curl -xIP:port 域名 用来指定访问的域名在哪个IP的哪个端口上 Nginx默认虚拟主机 不管什么域名解析到该服务器,都会访问到默认虚拟主机 ngi ...