vue-router嵌套的问题
咨询一个嵌套路由的问题 routes定义的时候，是通过children一层一层嵌套的，但界面上不嵌套，只有两层router-view，第一层是layout，主界面部分是第二层。这样在界面的router-view显示router嵌套在底层（3层或者4层）的组件？比如下面，但界面上不可能这么复杂。const nestedRouter = { path: '/authManage', c...
2024-01-10
vue-router-参数传递
vue-router-参数传递准备工作第一步：创建新的组件Profile.vue第二步：配置路由映射第三步：添加跳转的< router-link >传递参数的方式传递参数主要有两种类型：params和queryparams的类型：配置路由格式：/router/:id传递的方式：在path后面跟上对应的值传递后形成的路径：/router/123 , /router/abcquery的类型...
2024-01-10
vue-router 路由懒加载
webpack打包会将所有资源文件合并压缩成一个文件，导致最终的文件非常大，甚至超过几M，以致页面首次加载会比较慢，如下图：其中红色标出的是在浏览器中加载的js文件，gzip压缩前已经达到500多KB了。再看看路由按需加载后：文件被拆成一个个小的文件，即webpack的文件分割。这里是以页面为单位...
2024-01-10
vue-router简易的实现原理
class VueRouter { constructor(options) { this.$options = options; this.routeMap = {}; // 路由响应式 this.app = new Vue({ data: { current: "/" ...
2024-01-10
vue-router 安装和基本使用
1、安装npm install vue-router --save2、src下创建router文件夹并创建index.js文件 ---- /src/router/index.jsindex.js/* * @Description: web router * @Author: wangwz10@lenovo.com * @LastEditors: wangwz10@lenovo.com * @Date: 2020-05-28 15:48:40 * @LastEditTime: 2021-02-04 10:3...
2024-01-10
vue-router 动态添加 路由
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单，前端动态添加路由 然后在设置菜单 1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 使用方法 this.$router.options.routes[0].children.push({//插入路由 name:'list', pa...
2024-01-10
vue中router跳转本页刷新
问题: 导航栏的地址发生改变但是页面却不刷新 (用vue-router路由到当前页面，页面是不进行刷新的)解决: 1.this.$router.go(0); 2.location.reload() 上两种方法 都会出现闪屏的问题 用户体验不好 3. 用一个空页面做中转，解决了闪屏的问题，可以看到导航栏路径的快...
2024-01-10
vue-router重定向 不刷新问题
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。 问题描述: 之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。 解决方法： 通过阅读vue-ro...
2024-01-10
vue-router实现嵌套路由的讲解
一、嵌套路由（配置好父路由component后，在父路由下面添加children属性来配置这个父路由的子路由）需要注意的是：父组件中的<router-view></router-view>是子组件的占位符是必不可少的嵌套路由的现象：点击了路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址栏的路径也随之改变。...
2024-01-10
vue生命周期及router按需加载
Vue生命周期=> 初始化实例=> beforeCreated(此步不能调用数据及方法)=> 实例创建完成(observer数据观测 属性和方法的运算 watch/event事件回调)=> created=> 检测页面内的el template并编译渲染=> beforeMount=> vm.$el替换el,挂载实例=> mounted()=> 检测数据是否发生改变 发生改变时 => beforeUpdated ...
2024-01-10详解vue-router数据加载与缓存使用总结
之前开发了一个单页面应用，按照深度，分为三层：目录页、一级子页（标签页、故事页等）、二级子页（故事编辑页）。这三类页面都共享一个完整的数据model，从上级页面进入下一级页面时，能够加载相应数据；回到上一级时，数据有更新。举个栗子，从故事页点击“编辑”按钮，进入故事编辑页...
2024-01-10
vue router-link 上添加点击事件
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。所以如果在想要在router-link上添加事件的话需要@click.native这样写<router-link :to="/user/age/10" @click.native="overTag(index)" @mouseover.native=...
2024-01-10
解决vue-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10
Vue脚手架结构及vue-router路由配置
首先官网介绍，用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。 在我们搭建vue环境之后，会生成一个文件夹，如图一级...
2024-01-10
Vue-router 路由详解 多级路由
今天我来分享一下vue路由方面的心得体会。文章源码位置 https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base使用的脚手架为Vue3.0，IDE为VSCode首先引入vue路由cnpm install vue-router --save-dev然后我们在src目录下建立文件夹router,并创建文件index.js项目大致结构如下然后我们在view文件夹(新建一个)下创建...
2024-01-10
学习Vue---3.Vue-router
编写使用路由的3步：定义路由组件注册路由使用路由<router-link><router-view>1.注册路由器（在 main.js）import Vue from 'vue'import router from './router'// 创建vue 配置路由器new Vue({ //配置对象的属性名都是一些确定的名称，不能随便修改 el: '#app', router, render: h => h(app)})2.路由器配置：（在 router ...
2024-01-10
vue-计算属性-computed
/* 计算属性:vue中对数据进行一些组合与计算的话，可以使用computed(计算属性); //例如：获取当前日期，组合*/ // 组合变成10-1 var vm = new Vue({ el: '#app', data :{ }, computed:{ //默认写法是这样 time : { return new Date()...
2024-01-10
vue--前端路由及vue-router两种模式
前言 路由这个概念最早在后端出现，随后前后端分离，直至当今的单页面应用，路由也在一直发生变化。本文来总结一下路由变化和vue-router中的路由模式区别相关知识点。正文 1、什么是前端路由 （1）后端路由阶段 早期的页面都是由html页面在服务端渲染的，服务端直接返回给客户...
2024-01-10
vue3 vue-router地址栏输入路由无效
求大神解答, 我用vue3配置好了vue-router 也挂载好了, 但是在url地址栏输入路由, 页面每次都渲染的是App.vue的内容.这是route/index.jsimport { createRouter, createWebHashHistory } from "vue-router"import home from '@/home'import login from '@/lo...
2024-03-15浅谈vue-router路由切换 组件重用挖下的坑
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新翻车现场再现：这是我的/router/index.js 的内容节选export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', componen...
2024-01-10vue-router 前端路由之路由传值的方式详解
路由传值在前端的路由里面，我们在切换路由的时候，也相当于切换了页面，页面与页面之前有时候需要做到传值 ，这个时候就需要进行路由传值，在VueRouter里面，两个路由之间做跳转的时候，如何进行传值呢？普通跨页面传值：1.通过localStoragesetItem()getItem()2.通过search(地址栏 ? 后面的参数)Vue...
2024-01-10vue-router路由参数刷新消失的问题解决方法
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: 'index', params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。解决方案：1、session&服务器渲染传统的方案是，登录页和主页是单独的两个页面，登录成功后服务器生成...
2024-01-10
vue computed的执行问题
1.在new Vue（）的时候，vue\src\core\instance\index.js里面的_init()初始化各个功能function Vue (options) {if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) { warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options) //初...
2024-01-10
Vue项目加载不出页面,router-view渲染不出页面
最近在回顾vue-router的时候踩到一个坑，router-view不能渲染下面是router的代码仔细看会发现……第4行和第14行……应该写成component而我写成了comment，就是一个单词的原因 导致加载不出来……逛论坛发现，还有很重要的一点，那就是该写成routes的地方一定一定不要写成其他（这里不举例了，自行想...
2024-01-10
vue图片裁剪插件vue-cropper使用方法详解
本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法，供大家参考，具体内容如下我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的，我这里采用了4:3的...
2024-01-10
