vue-router总结
一、文件目录说明main.js：应用的入口文件【js文件入口】App.vue：根组件，整个组件的入口【组件文件入口】new Vue({}); //Vue是构造函数，本质上是一个函数，函数就有原型prototype加载文件不要后缀名：resolve:{ extensions:['.js','.vue','.json'], alias:{ 'vue$':'vue/dist/vue.esm.js', '@':resolve('src') //@就...
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重定向 不刷新问题
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。 问题描述: 之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。 解决方法： 通过阅读vue-ro...
2024-01-10
vue-router 动态修改路由参数
路由地址后缀 /test?regionId=sj用户信息中有匹配的行政区划权限数组 xzqh: ['sj','hz'], 且有字段表示改用户默认归属的行政区划 regionId: sj当手动修改地址改成 /test?regionId=hz，因为 regionId 在符合的权限数组中，跳转到 /test?regionId=hz当手动修改地址改成 /test?regionId=nb，重定向地址到 /t...
2024-03-09
Vue的router-link标签
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，这...
2024-01-10
vueX+vue-router信息管理系统
vueX+vue-router信息管理系统利用vueX进行数据存储状态管理，路由跳转页面，如果用路由传值，会出现传值无法保存，所以用vueX效果图：1：2：store内代码：添加数据：数据列表：app.vue:router路由配置:...
2024-01-10
vue-resource 上传图片
const formData = new FormData()formData.append(\'file\',img,params.name);formData.append(\'id\',params.id);formData.append(\'name\',params.name);return new Promise((resolve,reject)=>{ Vue.http.post(uploadImg,formData).then(function(res){ resolve(res.bo...
2024-01-10
多个router-view无法同时显示
<!DOCTYPE html><html> <head> <title>My Eighth Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <script src="https://unpkg....
2024-03-13
Vue路由（vue-router）详细讲解指南
中文文档：https://router.vuejs.org/zh/Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）： route...
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脚手架结构及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-router懒加载速度缓慢问题及解决方法
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分...
2024-01-10
vue--前端路由及vue-router两种模式
前言 路由这个概念最早在后端出现，随后前后端分离，直至当今的单页面应用，路由也在一直发生变化。本文来总结一下路由变化和vue-router中的路由模式区别相关知识点。正文 1、什么是前端路由 （1）后端路由阶段 早期的页面都是由html页面在服务端渲染的，服务端直接返回给客户...
2024-01-10
Vue-Router的routes配置详解
目录介绍routes中对象属性path: stringcomponent : Component | () => import(组件)name: stringredirect： string | Location | Functionprops: boolean | Object | Functionalias: string| Array[string]children?: Array[RouteConfig]beforeEnter: (to: Route, from: Route, next: Fun...
2024-01-10
vue(6)-vuex
step1npm install --save vuexstep2他的用法与vue-router差不多，main.js中，通过Vue.use(),使用；然后new Vuex.store();然后new Vue( store:store):step3这样在任何组件里，可以通过{{$store.state.city}}来使用同样，在任何组件里可以通过this.$store.commit(..，..)来执行mutations:...
2024-01-10vue-router实现tab标签页（单页面）详解
vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。首先，.vue中的内容非常简单，<router-link>创建标签，并指定路径，<router-view>渲染路由匹配到的组件。<temp...
2024-01-10
vue2.0 - vue-router滚动条返回顶部
header是固定的，点击左边导航栏切换页面，使右边页面滚动条在顶部 各位大佬应该怎么实现回答：刚才也是遇到这样一样的问题就写了个全局的函数Vue.prototype.upToTop = function() { let dom = document.getElementById('main-content'); dom.scrollTop = 0;}main-content是我的页面的主体部分的标签id我在每次页...
2024-01-10
vue.js多个view-router为什么无法显示？
小白尝试在组件MainUI内弄两个个view-router，是不是加上name属性就可以了？但是它是不显示，如果是单个的不加name属性是正常显示的，请问大哥们我哪里写错了?这是路由const routes = [ { path: "/", component: MainUI, children: [ { path: "", ...
2024-02-25解决vue-router 二级导航默认选中某一选项的问题
现在有一个需求是这样的：这个需求很正常吧！ 二级导航条，不是二级路由的（如果是二级路由是用linkActiveClass来做，我之前文章说过），是单纯获取数据的按钮，当这个页面出现时，默认选中第一项。首先：上面的判断的意思是：如果你点击某一个选项把这个index传过去，activeName等于那一个传...
2024-01-10vue el-from校验成功但是 return不管用？
async handleSubmit() { const flag = await this.$refs.form.validate().catch((e) => e) if (!flag) return this.loading = true try { await queryVipStandardEdit({ ...
2024-03-01
