vue router 多租户

详解vue身份认证管理和租户管理

2021-05-24
概述 功能模块的开发往往是最容易的,但是要处理好每个细节就不容易了.就拿这里的身份认证管理模块来说,看似很简单,因为后端接口都是ABP模板里现成的,前端部分无非就是写界面,调接口,绑数据:但是看一下ABP Angular版本的代码,就会发现他其实是有很多细节方面的处理的. 回到vue,因为前端部分的代码文件太多,下面只列出一些需要注意的细节,其他的像vue组件.表格.表单.数据绑定.接口请求之类的其实都差不多就不说了. 按钮级权限 前面章节中实现了菜单权限的控制,按钮权限的道理也是一样的.判断a

解决vue router使用 history 模式刷新后404问题

2017-07-18
因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

vue router仿天猫底部导航栏功能

2017-10-16
首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <

vue router下的html5 history在iis服务器上的设置方法

2017-10-15
首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

vue router demo详解

2017-10-12
本文实例为大家分享了vue router demo代码,供大家参考,具体内容如下 <!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title> vue route demo</title> </head> <body> <script src="https://unpkg.c

vue router自动判断左右翻页转场动画效果

2017-10-07
前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件 最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到

vue router使用query和params传参的使用和区别

2017-11-10
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

2018-01-22
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

vue router动态路由下让每个子路由都是独立组件的解决方案

2018-04-22
vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

vue+Vue Router多级侧导航切换路由(页面)的实现代码

2018-12-19
当当当当当~我又来了. 在项目里经常会遇到侧导航切换页面的功能. 如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数. 所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可.大大减少了后期维护的麻烦 涉及功能点 侧导航支持多级 Vue Router的使用方法( 官方文档 ) 子父组件的写法 样式:elementUI 效果图 实现 --- 目录结构 --- Vue Router的使用方法 首先安装 npm insta

vue router的基本使用和配置教程

2018-11-04
路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 1.在main.js文件中引入相关模块

vue router 组件的高级应用实例代码

2019-04-05
1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

vue router 通过路由来实现切换头部标题功能

2019-04-23
在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口.这时访问页面时头部标题不会变,该问题的解决方案如下: 通过采用组件内路由卫士(beforeRouterEnter.beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息.点击查看文档 beforeRouterEnter:第一次进入时调用. beforeRouterUpdate:重复使用当前组件时调用. 效果图如下: 注意看页面标题与图标变换  路由元信息(meta)配置 在路由元信息中

Vue Router history模式的配置方法及其原理

2019-05-29
vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

vue router 用户登陆功能的实例代码

2019-04-22
有些路由页面需要用户登陆之后才能访问如(用户中心),如果用户没有登陆就访问这些页面的话就应该转换到登陆页面,登陆成功之后在进入该页面. 需要用到的知识点有:H5中的会话存储(sessionStorage).vue-router路由前置操作.路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆. const router = new Router({ mode: 'history', base: process.env.BASE_URL, route

vue router导航守卫(router.beforeEach())的使用详解

2019-04-17
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

vue router总结 $router和$route及router与 router与route区别

2019-07-03
vue router总结 $router和$route及router与 router与route区别 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url. this.$route相当于当前激活的路由对象,包含当前ur

vue router 跳转时打开新页面的示例方法

2019-07-28
记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

vue router动态路由设置参数可选问题

2019-08-21
在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面 new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => impo

vue router+vuex实现首页登录验证判断逻辑

2018-05-16
首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {

关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

2018-12-07
#在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate