概念:
后端路由:
后端处理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 脚手架使用路由的更多相关文章

  1. vue 脚手架关于路由的一点理解

    https://router.vuejs.org/zh/ 可以先翻翻文档看看介绍啊,一般我不怎么喜欢看文档,都是直接看人家案例,在回头看文档的,所以学习速度慢很多,希望我以后成为一个爱学习的妹子,比较 ...

  2. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

  3. Vue脚手架结构及vue-router路由配置

    首先官网介绍,用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做 ...

  4. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  5. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  7. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  8. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  9. 使用vue脚手架(vue-cli)快速搭建项目

    一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...

随机推荐

  1. JS设计模式——策略模式

    设计模式高大上,业务代码用不上...平时用不上我们就可以忽略了吗? 非也,就像面试造火箭,工作拧螺丝一样.万一我们公司哪天要造火箭了,你得立马能上手. 同时,有些复杂的业务代码也可以用设计模式的思想去 ...

  2. pycharm创建Django项目时报 AttributeError:'module' object has no attrbute 'main' 错误或者创建了就只有venv一个目录

    这是因为创建项目时候没有选择合适的项目环境. 所以在创建项目的时候选择一下项目的环境,比如选择python的运行环境 这时候创建的项目就不再报 AttributeError:'module' obje ...

  3. css沉默

    css变色龙实现. ==== css 1 水平居中和垂直居中. 2 css布局方式. 3 你写过UI框架么.

  4. zabbix-agent TIME_WAIT 过多(转)

    一.系统环境 操作系统: Centos 6.4 64bit zabbix-agent 版本: Zabbix agent v2.2.7 (revision 50148) (24 October 2014 ...

  5. 小浩算法|一文让你学会如何用代码判断"24"点

    “24点”是一种数学游戏,正如象棋.围棋一样是一种人们喜闻乐见的娱乐活动.它始于何年何月已无从考究,但它以自己独具的数学魅力和丰富的内涵正逐渐被越来越多的人们所接受.今天就为大家分享一道关于“24点” ...

  6. leetcode--js--Median of Two Sorted Arrays

     问题描述: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of ...

  7. 一种高灵敏度自带DSP降噪算法的音频采集解决方案

    背景调研   随着AI渗透到各行各业,人们对语音的需求也越来越大,最近一两年,各种AI音频设备如雨后春笋般冒出.各种智能AI设备的推出,意味者市场对低成本的音频采集设备越来越多.针对这种情况,我们开发 ...

  8. Zookeeper机制

    顾名思义 zookeeper 就是动物园管理员,他是用来管 hadoop(大象).Hive(蜜蜂).pig(小 猪)的管理员, Apache Hbase 和 Apache Solr 的分布式集群都用到 ...

  9. Learning links

    技术文档.API 和代码示例 _ Microsoft Docs _NET 文档 _ Microsoft Docs TutorialsTeacher_C# 菜鸟教程_C# 圣殿骑士<博客园精华集& ...

  10. Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置

    Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...