最近做vue 单页项目涉及到多角色用户权限问题，不同的角色用户拥有不同的功能权限， 不同的功能权限对应的不同的页面git: https://github.com/pch1024/dynamicRouter 举个例子：角色A =>功能1=>功能2=>功能3角色B =>功能1=>功能4=>功能5第1步 定义默认路由和动态路由//动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个，防君子不防小人) export const dynamicRouter = [{ path: /b, name: b, component: pageB...
react-router模块化配置因为公司的需要最近踏进了react坑，一直在挖坑填坑，在路由这一块折腾得不行。直接进入主题，配置react-router模块化 1.先下载react-router-domnpm install react-router-dom --save2.在相应的文件引入react-router-dom相应的模块import { BrowserRouter as Router, Route, Link } from "react-router-dom";3.在src子创建一个module目录，接着在module目录在创建一个router.js文件，用来配置路由。//router....
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多 2、hash模式 vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时...
vue-router分为 hash和 history模式，前者为其默认模式，url的表现形式为 http://yoursite.com#home，比较难看。后者的url表现形式为 http://yoursite.com/home，比较美观。 但如果要使用 history模式，我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。 history模式的配置方法 我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。 首先要将 mode设置为 history： const router = new VueRouter({mo...
当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL： http://www.abc.com/#/hello ，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history模式 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器...
背景koa-router路由越来越多,api下的router都要使用下面的方式引入,怎么才能方便快捷的将api下的所有文件都引入呢 这次记录的就是如果将koa-router 一次性循环引入 const book = require(./app/api/v1/book) const classic = require(./app/api/v1/classic) // ... app.use(book.routes(), book.allowedMethods()) app.use(classic.routes(), classic.allowedMethods()) //... 文件目录koa-demo/|-api/|-books.js|-classic.js|-use...
当前版本: 3.0.3类目录: src/history/base.js 前言:对于vue-router来说，有三种路由模式history,hash,abstract, abstract是运行在没有window的环境下的，这三种模式都是继承于history类，history实现了一些共用的方法，对于一开始看vue-router源码来说，可以从这里开始看起。 初始属性router: Router; 表示VueRouter实例。实例化History类时的第一个参数base: string; 表示基路径。会用normalizeBase进行规范化。实例化History类时...
koa-router 定制路由时支持通过冒号形式在 url 中指定参数，该参数会挂载到 context 上然后可通过 context.params.paramName 方便地获取。 考察下面的示例： var Koa = require("koa"); var Router = require("koa-router");var app = new Koa(); var router = new Router();router.get("/user/:id", async function(ctx, next) {const userId = ctx.params.id;ctx.body = `user id is:${userId}`; });app.use(router.routes()).us...
深入Vue-Router源码分析路由实现原理 使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。 到发文时使用的版本是： - vue (v2.5.0) - vue-router (v3.0.1)一、vue-router 源码结构 github 地址：https://github.com/vuejs/vue-routercomponents下是两个组件<router-view> 和 <router-link> history是路由方式的封装，提供三种...
两组件间传值，可能包含多种情况，有父子组件和非父子组件，对于父子组件网上有很详细的方法讲解，但非父子组件传值有用bus总线，还有一些其他方法，其中的使用路由跳转的方法讲解太过简洁，难以理解。因为是公司项目，采用的是公司封装的UI框架，但基本上还是采用vue框架，ts编写。所以一些样式结构可能没有参考价值，但我会讲解清楚每一部分作用，主要是路由跳转部分的代码实现。 首先，需求如下图，树状列表每一项有一个编辑按钮...
一个具有基本增删改查功能的通讯录，数据保存在本地的localStorage中。 demo地址: https://junjunhuahua.github.io 1. 所用技术 js框架: vue2 https://cn.vuejs.org/ ui框架: elementUI http://element.eleme.io/#/zh-CN 脚手架: vue-cli 单页: vue-router https://router.vuejs.org/zh-cn/ 模块打包: webpack 2. 脚手架搭建 # 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpac...
在使用react-router时会遇到奇怪的问题，比如当我们从首页进入详情页的时候，首页跳转到详情页，首页滚动的位置，进入到详情页的时候也会被记录下来，原因是由于共享了同一个history，所以对记录有所保留，这显然不符合我们的浏览习惯。 总结种解决方案： 方案一 <Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}><Route path="/" component={ App }> </Router>方案二 class Protol extends React.Component...
今天在实现一个小功能的时候，遇到一个问题，使用vue-router获取上一页面的url信息，我尝试了多种方式，发现使用vue-router的canDeactivate钩子实现这个功能最为方便，现在将我的实现代码总结如下: 项目使用的是vue-cli,直接贴代码 export default {mixins: [],vuex: {actions: {fetchCertificates},},data() {return {}},route: {data() {this.$root.showLoading();return this.fetchCertificates().then((res) => {this....
疑问：（判断和传参） 点击导航栏目，js如何判断自己点击的是哪个具体栏目？ 它们是如何传参的？ 如何使用params，携带查询参数？ 效果图解说： A. 点击选择【屈原“查看详情”】之前B. 点击选择【屈原“查看详情”】之后要点总结： 在vue-router中，有两大对象被挂载到了实例this； $route（只读、具备信息的对象）； $router（具备功能的函数） 查询字符串： 1.去哪里 ？ <router-link :to="{name:detail,query:{id:1}}"> xxx...
路由传值 在前端的路由里面，我们在切换路由的时候，也相当于切换了页面，页面与页面之前有时候需要做到传值 ，这个时候就需要进行路由传值，在VueRouter里面，两个路由之间做跳转的时候，如何进行传值呢？ 普通跨页面传值： 1.通过localStoragesetItem() getItem()2.通过search(地址栏 ? 后面的参数)VueRouter的路由传值 VueRouter的路由传值有两种方式 jquery传值。 类似get传值 传值的路由 this.$router.push({path: "/login?un...