vue2.0中vue-router使用总结
#在vue-cli所创建的项目中使用
进入到项目的目录后使用 npm install vue-router --save 安装vue-router,同时保存在webpack.Json配置文件中,然后在main.js使用方法如下:

在第三步实例化路由是可以配置路由的信息,如下:


区别在于:前者地址为http://localhost:8080/#/apple,后者地址为http://localhost:8080/apple,且后者可以根据router-link跳转到指定的路由。
然后就可以在页面(app.vue)中使用路由啦:

vue2.0中vue-router使用总结的更多相关文章
- Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- vue2.0中的$router 和 $route的区别
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了 ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
- Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
随机推荐
- .net mvc里AutoMapper更为便捷的使用方法
前言:AutoMapper的下载安装我就不多说了,网上百度一大堆.今天我就说说它的更为简单的使用,什么叫更为简单呢?按照一般的使用方法,我们首先建DTO,然后建每个对应的Profile,然后还要把每个 ...
- export default 和 export的使用方式
注意:1.export default 向外暴露的成员,可以使用任意的变量来接收 2.在一个模块中 ; export default 只允许向外暴露一次 3.在一个模块中 ; 可以同时使用 expor ...
- UML绘制活动图--客户来电咨询活动图
选择Logic View–>New–>Activity Diagram 修改NewActivity为客户来电咨询 选择初始状态和终止状态(下图中上面是Start State,下面是End ...
- Windows环境下的RTKPlot_Qt版本编译时遇到的问题和解决方法
在使用了 RTKLIB开源包自带的 rtkplot.exe后,知道了它所具有的功能,就想着如何模仿它做出一个 demo.一开始看的是之前下载的 2.4.2版本的 RTKLIB,里面是使用 Delphi ...
- java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=testSelect], {ExactMatcher:fDisplayName=testSelect(cool.zsn.Dao.UserMapperTest)], {LeadingIdentifierMatcher:fClassName=cool.zsn
@Before:每次调用类中的方法,都会先执行@Before下的方法 @Before下的方法应该是 public : @Before public void init() { application ...
- git中如何忽略文件上传?
使用原因:至于我们为什么要使用git忽略文件,原因很多.就比如我自己的情况吧!自己一个人多地方开发,为了代码同步,这样很方便.但是有个问题就是,我创建 的是开源项目,上面有一些服务器上面的配置信息,这 ...
- jquer搜索
<body> <br/> <center> <tr><td>创建时间:</td><td><input type ...
- sftp上传到远程服务器
开发遇到一个需求,需要将图片通过sftp上传到远程服务器上,之前没用过这个功能,折腾了我好几天才搞定,下面记录下我的处理方法: $sftp = 'ssh2.sftp://';//连接sftp $con ...
- kafka概述
kafka概述 Apache Kafka是一个开源 消息 系统,由Scala写成.是由Apache软件基金会开发的一个开源消息系统项目. Kafka最初是由LinkedIn开发,并于2011年初开源. ...
- ctf题目writeup(7)
2019.2.10 过年休息归来,继续做题. bugku的web题,地址:https://ctf.bugku.com/challenges 1. http://123.206.87.240:8002/ ...