精华内容
下载资源
问答
  • 路由配置中节点的所有子节点设置hidden为true,但该节点设置hidden为false,会出现以上情况! 1. 尝试配置总是展开 2. 都设置为true

    当路由配置中节点的所有子节点设置hidden为true,但该节点设置hidden为false,会出现以上情况!

    1. 尝试配置总是展开

    2. 都设置为true

    展开全文
  • vue-page-stack】Vue页面堆栈管理器

    千次阅读 2019-06-05 02:44:53
    Vue页面堆栈管理器 A vue page stack manager Vue页面堆栈管理器 vue-page-stack 示例展示了一般的前进、后退(有activited)和replace的场景,同时还展示了同一个路由可以存在多层的效果(输入必要信息) ...

    Vue页面堆栈管理器

    A vue page stack manager Vue页面堆栈管理器 vue-page-stack

    示例展示了一般的前进、后退(有activited)和replace的场景,同时还展示了同一个路由可以存在多层的效果(输入必要信息)

    目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用

    预览

    源码

    需求分析

    由于重度使用了Vue全家桶在web App、公众号和原生Hybrid开发,所以很自然的会遇到页面跳转与回退这方面的问题。

    场景举例:

    1. 列表页进入详情页,然后回退
    2. 某操作页A需要在下一页面B选择,选择后需要退回到A页面(A页面还要知道选择了什么)
    3. 在任意页面进入到登录页面,登录或者注册成功后返回到原页面,并且要保证继续回退是不会到登陆页面的
    4. 支持浏览器的backforward(微信或者小程序很有用)
    5. 在进入、退出或者某些特殊页面的时候添加一些动画,比如模仿ios的默认动画(进入是页面从右向左平移,退出是页面从左向右平移)

    尝试过的方法

    尝试了以下方法,但是都没有达到我的预期

    keep-alive

    一般是使用两个router-view通过route信息和keep-alive控制页面是否缓存,这样存在两个问题:

    1. keep-alive对相同的页面只会存储一次,不会有两个版本的相同页面
    2. 两个router-view之间没有办法使用transition等动画

    CSS配合嵌套route

    曾经在查看cube-ui的例子的时候,发现他们的例子好像解决了页面缓存的问题,我借鉴(copy)了他们的处理方式,升级了一下,使用CSS和嵌套route的方式实现了基本的需求。 但是也有缺点:

    1. 我必须严格按照页面的层级来写我的route
    2. 很多页面在多个地方需要用到,我必须都得把路由配上(例如商品详情页面,会在很多个地方有入口)

    功能说明

    1. 在vue-router上扩展,原有导航逻辑不需改变
    2. push或者forward的时候重新渲染页面,Stack中会添加新渲染的页面
    3. back或者go(负数)的时候不会重新渲染,从Stack中读取先前的页面,会保留好先前的内容状态,例如表单内容,滚动条滑动的位置等
    4. back或者go(负数)的时候会把不用的页面从Stack中移除
    5. replace会更新Stack中页面信息
    6. 回退到之前页面的时候有activited钩子函数触发
    7. 支持浏览器的后退,前进事件
    8. 支持响应路由参数的变化,例如从 /user/foo 导航到 /user/bar,组件实例会被复用
    9. 可以在前进和后退的时候添加不同的动画,也可以在特殊页面添加特殊的动画

    安装和用法

    安装

    npm install vue-page-stack
    # OR
    yarn add vue-page-stack
    复制代码

    使用

    import Vue from 'vue'
    import VuePageStack from 'vue-page-stack';
    
    // vue-router是必须的
    Vue.use(VuePageStack, { router }); 
    复制代码
    // App.vue
    <template>
      <div id="app">
        <vue-page-stack>
          <router-view ></router-view>
        </vue-page-stack>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return {
        };
      },
      components: {},
      created() {},
      methods: {}
    };
    </script>
    
    复制代码

    API

    注册

    注册的时候可以指定VuePageStack的名字和keyName,一般不需要

    Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
    复制代码

    前进和后退

    想在前进、后退或者特殊路由添加一些动画,可以在router-view的页面通过watch $route,通过stack-key-dir(自定义keyName这里也随之变化)参数判断此时的方向,可以参考实例

    相关说明

    keyName

    为什么会给路由添加keyName这个参数,是为了支持浏览器的后退,前进事件,这个特点在微信公众号和小程序很重要

    原理

    获取当前页面Stack部分参考了keep-alive的部分

    结束语

    念念不忘,必有回响

    这个插件存在我心中很久了,断断续续做了好久,终于被我搞定了,真的非常开心。

    目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用,有任何的意见或者建议,欢迎在 Github 提issue和PR,感谢你的支持和贡献。

    这个插件同时借鉴了vue-navigationvue-nav,很感谢他们给的灵感。

    转载于:https://juejin.im/post/5cefa524f265da1baf7cd085

    展开全文
  • vue堆栈管理 vue-element-admin (vue-element-admin) vue-element-admin is a production-ready solution for admin interfaces. Based on Vue.js and use the UI Toolkit -- element. vue-element-admin is a ...

    vue的堆栈管理

    vue-element-admin (vue-element-admin)

    vue-element-admin is a production-ready solution for admin interfaces. Based on Vue.js and use the UI Toolkit -- element. vue-element-admin is a magical vue admin, it based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.

    vue-element-admin是用于管理界面的生产就绪型解决方案。 基于Vue.js并使用UI Toolkit-元素。 vue-element-admin是一个神奇的vue管理员,它基于vue的最新开发堆栈,内置的i18n解决方案,企业应用程序的典型模板以及许多很棒的功能。 它可以帮助您构建大型复杂的单页应用程序。 我相信无论您有什么需求,该项目都将为您提供帮助。

    vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.

    vue-element-admin是一个管理界面集成解决方案,不适合作为基础模板进行二次开发。

    • Base template recommends using: vueAdmin-template

      基本模板建议使用:vueAdmin-template

    • Desktop: electron-vue-admin

      桌面:electron-vue-admin

    Note: This project uses [email protected]+ version, so the minimum compatible [email protected]

    注意:此项目使用[受电子邮件保护] +版本,因此最低兼容[受电子邮件保护]

    制备 (Preparation)

    You need to install node and git locally. The project is based on ES2015+、vue、vuex、vue-router 和 element-ui. All data requests for this project are simulated using Mock.js. It would be helpful if you have pre-existing knowledge on those.

    您需要在本地安装node和git。 该项目基于ES2015 +,vue,vuex,vue-router和element-ui。 使用Mock.js模拟此项目的所有数据请求。 如果您对这些已有知识,将很有帮助。

    This project is not a scaffolding and is more of an integrated solution.

    该项目不是脚手架,而是更多的集成解决方案。

    This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.

    该项目不支持低版本浏览器(例如IE)。 如果需要,请自己添加polyfill。

    特征 (Features)

    - Login / Logout
    - Permission authentication
    - Multi-environment build
    - Dynamic sidebar (supports multi-level routing)
    - Dynamic breadcrumb
    - I18n
    - Customizable theme
    - Tags-view(Tab page Support right-click operation)
    - Rich text editor
    - Markdown editor
    - JSON editor
    - Screenfull
    - Drag and drop list
    - Svg Sprite
    - Dashboard
    - Mock data
    - Echarts
    - Clipboard
    - 401/404 error page
    - Error log
    - Export excel
    - Export zip
    - Front-end visualization excel
    - Tree Table
    - Table example
    - Dynamictable example
    - Drag and drop table example
    - Inline edit table example
    - Form example
    - Two-step login
    - SplitPane
    - Dropzone
    - Sticky
    - CountTo
    - Markdown to html

    入门 (Getting started)

    # clone the project
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    
    # install dependency
    npm install
    
    # develop
    npm run dev
    This will automatically open http://localhost:9527.

    建立 (Build)

    # build for test environment
    npm run build:sit
    
    # build for production environment
    npm run build:prod

    高级 (Advanced)

    # --report to build with bundle size analytics
    npm run build:prod --report
    
    # --preview to start a server in local to preview
    npm run build:prod --preview
    
    # lint code
    npm run lint
    
    # auto fix
    npm run lint -- --fix

    翻译自: https://vuejsexamples.com/a-magical-vue-admin-template-based-on-the-newest-development-stack/

    vue的堆栈管理

    展开全文
  • vue 路由

    2019-11-28 10:49:45
    什么是路由 自己理解路由 简单地说,路由就是根据不同的url地址展示不同的页面和内容 说起路由,最先想到的应该就是路由器,那么路由器的工作原理是什么呢? 路由器的功能就是一个中转站,就是把网络中的包通过一个...

    什么是路由

    自己理解路由

    • 简单地说,路由就是根据不同的url地址展示不同的页面和内容
    • 说起路由,最先想到的应该就是路由器,那么路由器的工作原理是什么呢?
    • 路由器的功能就是一个中转站,就是把网络中的包通过一个一个路由器到达转发的目的

    实现原理:

    就像一个人如果要去某个地方,一定要在他的脑海里有一张地图,在每个路由器的内部也有一张地图,这张地图就是路由表。

    前端路由

    • 随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行
    • 异步交互体验的更高级版本就是 SPA —— 单页应用
    • 单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由

    单页面应用 - SPA

    单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。

    • 优点
      • 用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
      • 前后端分离
    • 缺点
      • 初次加载时耗时多
      • 导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)或使用hash模式
      • 不利于seo

    在vue-cli3中使用vue-router

    • 比默认配置多的文件
      • views 存放页面
      • router.js 配置路由对象信息
    • routerjs中
    export default new Router({
      routes: [
        {
          path: '/',  // 匹配的路由名称
          name: 'home',
          component: Home // 匹配上路由所显示的内容
        },
        {
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        }
      ]
    })
    

    传参

    查询字符串

    <router-link to="/login?id=1"></router-link>
    
    {
        path: "/login"
    }
    

    参数形式

    <router-link to="/login/123"></router-link>
    {
        path: "/login/:id"
    }
    

    路由守卫

    • 全局路由守卫
      • 写在main.js
      • router.beforeEach((to, from, next) => {})
      • 触发机制:只要有路由的跳转,都会触发全局路由守卫,所以,当需要被拦截的路由较多时,建议使用全局路由守卫
    let arr = ["/home/my", "/home/cart"];// 这个数组存的是需要被拦截的路由
    router.beforeEach((to, from, next) => {
      console.log("全局路由守卫被触发")
      let uid = localStorage.getItem("uid");
      if (arr.indexOf(to.path) != -1) {
        console.log("该路由需要被拦截")
        if (uid) {
          next()
        } else {
          next('/login')
        }
      } else {
        next()
      }
      // to 是一个对象,是你将要访问的路由的对象信息,我到哪里去
      // from 是一个对象,是你从哪里来
      // next之前就可以做一些验证判断,是否登录
      // 用户想看首页 => /home  
      // 我得先判断你是否已经登录过,如果没有登录,我就让你去登录页,如果已经登录
      // console.log(from)
      // if (to.path == '/home') {
      //   // 从本地存储拿出uid
      //   let uid = localStorage.getItem('uid');
      //   if (uid) {
      //     next()
      //   } else {
      //     next('/login')
      //   }
      // }
      // next app.use((req, res, next) => {next()})
      // 只有调用了next,你想to的那个页面才能被展示
      next()
    })
    
    • 路由独享守卫
      • 只要想去该路由的时候,就会触发
      • 该路由守卫只属于某一路由
    {
        path: "my/:id",
        component: () => import("@/views/my.vue"),
        beforeEnter: (to, from, next) => {
            console.log(to)
            console.log(from)
            // next之前又可以判断了
            let uid = localStorage.getItem("uid");
            if (uid) {
              next()
            } else {
              next('/login')
            }
            // next()
        }
    }
    
    • 组件内的守卫
      • 只要组件被渲染到页面
      • beforeRouteEnter(to, from, next) {this不能访问}
      • beforeRouteUpdate(to, from, next) {当路由改变,但是组件没变}
      • beforeRouteLeave(to,from, next) {当要离开此路由的时候}
    展开全文
  • vue-router vue-router怎么重定向页面? router文件配置redirect vue-router怎么配置404页面? 路由里配置一个path * 然后redirect 404 即可 切换路由时,需要保存草稿的功能,怎么实现呢? 使用...
  • 现在mvvm框架已经火的不成样了,React、Angular和Vue.js的发布让前端工程化成为主流,大前端时代已经到来了,最近接触了vue的前端路由,闲来无事就开始琢磨源码,下面来说说前端路由的原理。 一. 前端...
  • vue路由实现原理

    2019-02-10 16:31:27
    路由需要实现的功能 1.改变url且不让浏览器向服务器发出请求; 2.监测 url 的变化; 3.截获 url 地址,并解析出需要的信息来匹配路由规则。 前端目前只有2种模式 1.hash模式(IE8) 用a标签或者window.location.hash...
  • 目录vue-router的安装普通路由的挂载 (vue+cli_webpack + vue-router安装状态下)子路由的配置 vue-router的安装 注:如果是使用 vue-cli + webpack进行创建vue项目的时候,其中惠游一个选项告知是否安装vue-router...
  • 今天做了一个 vue 项目关于路由场景的问题,路由如何回退指定页面,在此做个记录。
  • vue路由基础篇--总结

    2020-12-15 10:09:53
    安装与引用 使用npm 安装 npm install vue-router 与模块系统一起使用时,必须通过Vue.use()显式安装路由器在router/index....使用Vue+Vue Router创建单页面引用程序很简单,通过Vue.js,我们已经在使用组件组成应用程
  • 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数。 router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push。 2.this...
  • 前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别。 一、基本情况 直观区别:hash模式url带#号,history模式不带#号。 1.hash模式 hash就是指url尾巴后的#号以及后面的...
  • 原本为了实现路由离开当前页面进行confirm提示,使用beforeRouteLeave实现。 但是点导航菜单后,发现点击确定按钮后再次弹窗提示框,原因是点击导航菜单进入了两次beforeRouteLeave,这是为何??????
  • vue获取路由的数据In the last post, More Advanced Routing with Vue, we covered using Transitions with Vue Router. This time we’ll cover Data Fetching with Vue Router. 在上一篇文章《 使用Vue进行更...
  • Vue Router4路由

    2021-08-04 15:12:48
    Vue Router4路由 官网:https://next.router.vuejs.org/zh/guide/essentials/route-matching-syntax.html 1、在vue-router是什么? Vue.js 的官方路由(就这么简单一句话) 2、Vue Router4 新特性 简单对比总结了...
  • Vue页面堆栈 English | Vue SPA导航管理器将UI像本地应用程序一样缓存在SPA中,而不是销毁它。 例 产品特点 :dragon: 在vue-router上扩展后,原始导航逻辑保持不变 :soccer_ball: 当页面通过push或forward重新...
  • ​ 在vue中,route,即为前端路由。下面是专业名词解释: 前端渲染和后端渲染 在使用route之前,我们需要知道一些基础知识: 改变url不刷新页面: 使用hash值来进行变化route。 location.hash("路径") 通过html...
  • row-click事件给当前页面路由加参数,不跳转,只要一点击报错堆栈溢出,很烦 vue-router.esm.js:1282 Uncaught RangeError: Maximum call stack size exceeded at RegExp.exec (<anonymous>) at RegExp....
  • 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:   hash模式 和 history模式 Hash 在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location...
  • 点击蓝字关注我们路由vue中,route,即为前端路由。下面是专业名词解释:前端渲染和后端渲染在使用route之前,我们需要知道一些基础知识:改变url不刷新页面:使用hash值来进行变化route。location.hash("路径")...
  • 使用vue配置好路由后,在浏览器端可以正常运行,路由正常跳转,但是打包在app端运行时,路由地址就是错的。 分析:由于手机端(安卓)匹配根地址"/"时是文件夹 /storage/emulated/0/Android/data/io.dcloud.HBuilder/...
  • 情况2:路由拦截出错 情况3:vue组件的name属性如果没有显示指定则为组件的名称,也会造成递归死循环,例如(组件名称为form,name属性没有指定,引入的子组件为Form,这样也会造成栈溢出) ...
  • Vue--- Vue-router 路由-5

    2020-10-14 11:37:00
    后端路由 早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示. 但是, 一个网站, 这么多页面服务器如何处理呢? 一个页面有自己对应的网址, 也就是URL. ...
  • 当前在首页,有新消息时跳转到了聊天室页面,聊天室页面返回时应先返回到聊天列表页而不是直接返回到首页,那么只能从路由栈入手了,但是查了一圈vue router并没有这种直接操作路由栈的方法,但是push有回调方法,...
  • sunrise-electron-vue 是 SUNRISE 系列项目的前端和 sunrise-spring-boot 是姊妹项目,该项目是一个后台前端解决方案,它基于 开发堆栈和 并使用 实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态...
  • 其实就是超出最大调用堆栈大小,查了很长时间,总结解决方法如下几种: 1、最常见的原因就是:递归函数出错 检查递归函数是否具有停止调用的判断条件,解决后,就不会有堆栈溢出了。 2、路由拦截出错 问题代码如下:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,472
精华内容 588
关键字:

vue路由堆栈

vue 订阅