随笔分类 -  vue-router

vue-router复习笔记
摘要：npm install vue-router --save-dev vue-router是一个插件包，所以我们还是需要用npm来进行安装的。也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router 阅读全文
posted @ 2018-03-01 21:47 Jinsuo 阅读(168) 评论(0) 推荐(0)
第11节：编程式导航
摘要：原文网址：http://jspang.com/2017/04/13/vue-router/ 这是这篇文章的最后一节，前10节课的导航都是用<router-link>标签或者直接操作地址栏的形式完成的，那如果在业务逻辑代码中需要跳转页面我们如何操作？这就是我们要说的编程式导航，顾名思义，就是在业务逻辑 阅读全文
posted @ 2018-01-15 19:01 Jinsuo 阅读(322) 评论(0) 推荐(0)
第10节：路由中的钩子
摘要：我们知道一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。 路由配置文件中的钩子函数 我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路 阅读全文
posted @ 2018-01-15 18:32 Jinsuo 阅读(283) 评论(0) 推荐(0)
第9节：mode的设置和404页面的处理
摘要：在学习过渡效果的时候，我们学了mode的设置，但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。 mode的两个值 具体的效果我在视频中会有所掩饰，不理解的小伙伴可以到视频中进行查看。 404页面的设置： 用户会经常输错页面，当用户输错页面时，我们希望给他 阅读全文
posted @ 2018-01-15 17:48 Jinsuo 阅读(230) 评论(0) 推荐(0)
第8节：路由的过渡动画
摘要：<transition>标签 想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。 1 2 3 <transition name="fade"> <router-view ></router-view> </transition 阅读全文
posted @ 2018-01-15 17:20 Jinsuo 阅读(489) 评论(0) 推荐(0)
第7节：alias别名的使用
摘要：上节学习了路由的重定向，我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式，我们也可以实现类似重定向的效果。 1.首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，jspang。 1 2 3 4 5 { path: 阅读全文
posted @ 2018-01-15 14:33 Jinsuo 阅读(450) 评论(0) 推荐(0)
第6节：vue-router 的重定向-redirect
摘要：开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以 阅读全文
posted @ 2018-01-15 14:08 Jinsuo 阅读(57740) 评论(0) 推荐(2)
第5节：vue-router 利用url传递参数
摘要：我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实 阅读全文
posted @ 2018-01-14 22:30 Jinsuo 阅读(759) 评论(0) 推荐(0)
第4节：单页面多路由区域操作
摘要：这节课我们讲“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的Ap 阅读全文
posted @ 2018-01-14 22:29 Jinsuo 阅读(573) 评论(0) 推荐(0)
第3节：vue-router如何参数传递
摘要：原文网址：http://jspang.com/2017/04/13/vue-router/ 开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显 阅读全文
posted @ 2018-01-14 14:54 Jinsuo 阅读(566) 评论(0) 推荐(0)
第2节：vue-router配置子路由
摘要：http://jspang.com/2017/04/13/vue-router/ 原文网址 我们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那我们这节课学习一下子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改 阅读全文
posted @ 2018-01-13 17:55 Jinsuo 阅读(2904) 评论(0) 推荐(0)
Vue-router笔记 第1节：Vue-router入门
摘要：安装vue-router vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。 1 npm install vue-router --save-dev 1 npm install vue-router --save-dev 1 1 阅读全文
posted @ 2018-01-12 17:39 Jinsuo 阅读(510) 评论(1) 推荐(0)