Vue Router
文章平均质量分 94
qq_36437172
这个作者很懒,什么都没留下…
展开
-
路由和菜单 - Vue 动态权限路由实现菜单列表之进阶版
路由和菜单是组织起一个应用的关键骨架,为了方便管理,使用了中心化的方式,在 router.config.js统一配置和管理。基本结构在这一部分,脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由和菜单的基本框架,主要涉及以下几个模块/功能:路由管理 通过约定的语法根据在 router.config.js 中配置路由。 菜单生成 根据路由配置来生成菜单。菜单项名称,嵌套路径与路由高度耦合。 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。下面简转载 2021-02-16 15:09:54 · 1540 阅读 · 2 评论 -
路由拦截 beforeEach 钩子函数
在 axios 库中,我们一般使用interceptors 对接口请求或者接口响应进行拦截,代码如下:const $http = axios.create({ headers: defaultConfig.headers})// request拦截器$http.interceptors.request.use(config => { ...... return config}, error => { // Do something with request e.原创 2020-10-03 18:12:00 · 622 阅读 · 0 评论 -
vue 从某个页面进入到当前路由时,滚动浏览器视图到特定内容的可视区域
需求描述:当我们从某个特定的页面进入到当前的那个路由页面时,需要滚动浏览器视图到特定内容区域;从其他页面进入当前页面时,则无法滚动视图区域,那么我们如何判断路由跳转呢?首先我们可能想到的是,路由监听,可以获取 from 和 to 的路由信息。代码如下:watch:{ $route (to, from) { console.log(to, from); }},使用上述监听路由时,并没有在控制台打印任何路由信息,而我决定采用深度监听路由变化,代码如下:watch: {原创 2020-09-20 22:51:13 · 479 阅读 · 0 评论 -
使用 vue-router 全局守卫钩子函数,根据登录状态进行路由拦截以及滚动条回到页面顶部
1.首先安装 vue-router 依赖npm install vue-router2.在 main.js 文件中,引入 router,挂载到根节点上import router from './router'new Vue({ router, store, render: h => h(Febs)}).$mount('#app')3.如何在 router 文件中做路由拦截呢?const whiteList = ['/login'] // 定义白名单//原创 2020-08-27 23:19:56 · 1209 阅读 · 0 评论 -
解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见。解决方案:方案一:只需在 router 文件夹下,添加如下代码:// src/router/index.jsVue.use(Router)const router = new Router({ routes})constVueRouterPush=Router.prototype.pushRouter.prototype.push=functionpush(to){retur...原创 2020-08-27 22:30:35 · 48438 阅读 · 19 评论 -
Vue Route 路由的使用
使用路由的时候有两个必要的知识:<router-link/>:这个相当于a标签,点击的切换时候的按钮<router-view/>:这个就是你加载过来的组件放的位置使用方法:1、cnpminstallvue-router--save下载路由2、在main.js里面引入路由:importrouterfrom'./router'导出路由:newVue({ el:'#app', router, rend...转载 2020-07-05 23:19:58 · 540 阅读 · 0 评论 -
路由跳转页面不触发 mounted 的原因
路由跳转handleAdd (type, row = {}) { // console.log(type, row) let param = `` if (type === 'copy') { param = `&capacityId=${row.id}` } this.$router.push({ path: `/capacityPool/list/addInquiry?type=${type}${p原创 2020-06-28 23:39:25 · 7702 阅读 · 1 评论 -
Vue 中使用 import 进行路由懒加载的原理
首先我们来说说,import 和 require 的区别。node 编程中最重要的思想就是模块化,import 和 require 都是被模块化所使用。(1)遵循规范require是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法(2)调用时间require 是运行时调用,所以require理论上可以运用在代码的任何地方 import 是编译时调用,所以必须放在文件开头(3)本质require 是赋值过程,其实require的.转载 2020-05-23 11:03:30 · 3483 阅读 · 0 评论 -
router.push(),router.replace(),router.go()
1.router.push(location)=====window.history.pushState想要导航到不同的 URL,则使用router.push方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。// 字符串router.push('home') // 对象router.push({ path: 'ho...转载 2020-01-12 10:20:49 · 561 阅读 · 0 评论 -
vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新
@click.native:事件后面要添加.native,不然添加的事件不起作用,具体原因应该是router-link为了阻止a标签的默认跳转事件<router-link to="/index" @click.native="flushCom">{{ projectInfo.name }}</router-link>router是路由实例,例如:var rout...原创 2019-03-04 19:38:01 · 3794 阅读 · 0 评论 -
Vue 路由跳转和跳转在新窗口打开以及query 和 params 传参方式
Vue 路由跳转配置:openDetails(val){ this.$router.push({ path: "/design-teamwork-task", query: { projectDetails: val }, //或者 name: 'designTeamworkTa...原创 2018-12-29 14:23:26 · 3807 阅读 · 1 评论 -
Vue 动态权限路由实现菜单列表之进阶版
需求:根据登录用户的权限,显示不同导航菜单也,同时操作不同的界面。(1)首先在本地配置好固定不变的路由地址,例如登录,首页这些页面,如下:import Vue from 'vue'import Router from 'vue-router'import LoginView from '@/views/login/Common'Vue.use(Router)let cons...原创 2019-10-13 10:38:54 · 710 阅读 · 0 评论 -
Vue 权限路由实现菜单列表
需求:根据登录用户的权限,显示不同导航菜单也,同时操作不同的界面。(1)首先在本地配置好【所有页面】下的路由地址,如下:import Vue from 'vue';import Router from 'vue-router';import User from '@/views/system/user';Vue.use(Router);let constRouter = [...原创 2019-10-04 00:08:19 · 2872 阅读 · 0 评论