标签:vue-router

vue-router路由拦截实现将未登录请求跳转到登录页面

我们在使用vue-router开发前端项目时,经常需要保证有些页面不需要登录就可以访问,但有些页面必须登录后才能访问,那我们该如何才能方便地实现这样的需求呢?其实,使用vue-router中的路由拦截可以轻松实现一些收保护的页面如果在未登录状态下被请求访问,可以直接跳转到登录页面。我们实现如上需求只需要两个步骤:1)在router目录下的index.js……

vue-router重复push出现NavigationDuplicated问题解决

我们在学习vue-router的编程式导航时,我们发现如果多次重复点击某个按钮触发页面跳转,会出现如下“NavigationDuplicated”错误,这里我先贴上我的部分代码:// template中菜单按钮<button @click="toBlog">博客</button>// 对应的cli……

Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

一、嵌套路由1、本文接着之前文章的案例继续:Vue系列入门教程(10)——vue-router路由之入门案例、命名路由和动态路由Vue系列入门教程(11)——vue-router路由之编程式导航2、实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:借助 vue-router,使……

Vue系列入门教程(11)——vue-router路由之编程式导航

一、初识编程式的导航router-link是创建 a 标签来定义导航链接进行跳转,称为声明式导航,除了声明式导航,还可以借助 router 的实例方法,通过编写代码来实现,这种方式称之为编程式导航,是通过绑定click事件,调用router.方法来进行跳转,这两种方式都能实现组件之间的跳转。二、编程式导航3种方式语法如下:router.push(……

Vue系列入门教程(10)——vue-router路由之入门案例、命名路由和动态路由

一、单页应用1、含义:浏览器无论访问什么地址,访问的真实页面始终是index.html,vue根据不同的地址,渲染不同的组件。由于真实页面是唯一的,用户看到的页面切换,实际上是组件的切换,这种应用称之为单页应用2、开发单页应用涉及到两个核心问题:二、初识vue-router1、vue-router 是 Vue.js 官方的路由管理器,使用vue-……