vue-router
五仁卤鸡翅
这个作者很懒,什么都没留下…
展开
-
vue前端权限控制
https://www.cnblogs.com/zhangruiqi/p/12690488.html?from=singlemessage原创 2020-09-05 21:24:01 · 162 阅读 · 0 评论 -
vue中query方式传参加密
https://www.jianshu.com/p/3d9b254a750d原创 2020-09-04 22:03:11 · 1101 阅读 · 0 评论 -
11、数据获取
目录介绍数据获取介绍学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记数据获取在进入路由后,需要从服务器获取数据,有两种实现方式:1、导航完成之后获取:先完成导航,然后在接下来的组件的生命周期钩子中获取数据。在获取数据期间显示’‘加载中’之类的指示。2、导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,获取成功后执行导航导航完成后获取数据:...原创 2020-02-29 20:33:12 · 204 阅读 · 0 评论 -
9、路由元信息
目录介绍路由元信息meta具体用法介绍学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记路由元信息定义路由的时候可以配置meta字段,如下所示:const router = new VueRouter({ routes:[ { path:'/foo', component:Foo,...原创 2020-02-29 17:58:26 · 348 阅读 · 0 评论 -
7、路由组件传参
目录介绍布尔模式对象模式函数模式介绍学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记布尔模式const User={ template:'<div>User{{$route.params.id}}</div>'}const router=new VueRouter({ routes:[ { ...原创 2020-02-29 17:30:45 · 192 阅读 · 0 评论 -
6、重定向、别名
目录介绍重定向、别名别名:介绍学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记重定向、别名重定向通过routes配置完成,可以有如下三种方式:const router = new VueRouter({ routes:[ { path:'/a', redirect:'/b' //...原创 2020-02-29 17:14:36 · 194 阅读 · 0 评论 -
5、命名路由、命名视图
目录介绍命名路由命名视图介绍学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记命名路由通过名称来标志一个路由,可以更加方便的使用。可以在创建Router实例的时候,在routes配置中给某个路由设置名称const router = new VueRouter({ routes: [ { path:'/us...原创 2020-02-29 17:02:33 · 316 阅读 · 0 评论 -
4、编程时导航
目录介绍编程时导航介绍学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记编程时导航除了使用创建a标签来定义导航链接,还可以使用router.push()方法,通过编码实现,如下所示:router.push(location,onComplete?,onAbort?)在vue实例内部,可以通过$route 访问路由实例,可以使用this.$route....原创 2020-02-29 15:37:06 · 233 阅读 · 0 评论 -
3、嵌套路由
目录介绍嵌套路由介绍嵌套路由即路由中嵌套着路由{ path:'/user/:id',component:User}如下图所示:/user/foo/ 路径对应着User模块,/user./foo/profile对应这User模块中的Profile模块嵌套路由具体实现,在如下代码中:<!DOCTYPE html><html lang="en">...原创 2020-02-29 14:53:32 · 199 阅读 · 0 评论 -
2、动态路由
目录动态路由响应路由参数的变化捕获所有路由或者 404 not found 路由高级匹配模式路由匹配优先级动态路由需要把某种模式匹配到所有的路由,全部映射到同个组件时。我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const Use...原创 2020-02-29 14:29:28 · 386 阅读 · 0 评论 -
vue-router学习笔记
目录介绍目录介绍学习vue-router做的一些总结笔记,内容会持续更新!目录1、HTML和JS中使用router2、动态路由3、嵌套路由4、编程式导航5、命名路由、命名视图6、重定向、别名7、路由组件传参8、导航守卫9、路由元信息10、过度动效11、数据获取12、滚动条位置...原创 2020-02-29 10:34:13 · 371 阅读 · 0 评论 -
1、HTML和JS中使用router
目录在HTML中直接使用,如下所示JavaScript使用组件进行处理在HTML中直接使用,如下所示方法:1、使用router-link 组件进行导航to 属性指定链接。 router-link 会被默认渲染程一个 < a >标签2、< router-view > 为路由出口,路由匹配到的组件被渲染在这里<!DOCTYPE html><htm...原创 2020-02-29 10:33:32 · 5778 阅读 · 1 评论 -
8、导航守卫
目录介绍导航守卫全局的导航守卫路由独享的守卫组件内的守卫对上述进行总结:介绍导航守卫导航守卫就是路由跳转过程中的一些钩子函数,再直白点就是路由跳转是一个大的过程,这个大的过程分为跳转前中后等细小的过程,每一个过程中都有一个函数,这个函数给了你能操作一些其它事的时机,这就是导航守卫。(可以类比于vue的生命周期)导航守卫分为:全局导航守卫、组件内的导航守卫、单个路由独享的导航守卫全局的导航...原创 2020-02-22 18:53:31 · 519 阅读 · 0 评论