VUE路由

vue路由使用全流程

1.下载vue-router模块到当前工程;[email protected]中配置devserver{open:true;}3.在src文件里面创建router文件夹,里面设置index.js4.在index.js中引入VueRouter函数importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(Vue
m0_67805754·2023-06-16 10:42

vue路由使用流程(手动)

(使用了我自己的文件内容,可以对照自己文件夹内容进行修改噢)0.下载与导入vue-router下载vue-router([email protected])导入vue-router(在main.js中)0.导入路由importVueRouterfrom'vue-router'使用vue的插件,都需要调用vue.use()Vue.use(VueRouter)1.导入组件@符号代表src文件夹的
两米八八!·2023-06-16 10:42

Vue路由跳转的五种方式

Vue路由跳转的五种方式目录Vue路由跳转的五种方式1.router-link2.this.$router.push()3.this.$router.replace()(用法同push)4.this.
前端初见·2023-06-15 01:41

vue-element-admin项目学习笔记（3）路由分析一:静态路由

前情回顾：vue-element-admin项目学习笔记（1）安装、配置、启动项目vue-element-admin项目学习笔记（2）main.js文件分析如果对vue路由部分还不是很熟悉的小伙伴，建议可以先去了解一下
藏蓝色攻城狮·2023-06-14 20:32

Vue路由简明实操笔记

路由1、作用：1）理解：一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理2）前端路由：key是路径，value是组件3）作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）2、安装路由：vue版本为2.x，建议vue-router安装3.x版本。vue版本为3.x，建议vue-router安装4.x版
藏蓝色攻城狮·2023-06-14 20:31

vue-element-admin项目学习笔记（4）路由分析二:动态路由及permission.js

vue-element-admin项目学习笔记（1）安装、配置、启动项目vue-element-admin项目学习笔记（2）main.js文件分析vue-element-admin项目学习笔记（3）路由分析一:静态路由如果对vue
藏蓝色攻城狮·2023-06-14 08:13

vue 路由守卫中 next 方法的理解

vue路由守卫中next方法的理解在网上看到了一篇通俗易懂的文章,此文章出处在这里我用通俗点的说法解释上next(),next(false),next(’/’),next(error)，希望通过这接地气的解释你能掌握这几个知识点
hemiao3000·2023-06-13 13:23

vue路由传参params和query的用法和区别

1.Params//带过去id通过this.$router.push({name:routename，parmas:{id:id}});由于动态路由也是传递params的，所以在this.$router.push()方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问在路由配置文件中定义参数：2.Query页面通过path和q
猿分让我们相遇·2023-06-12 13:16

vue路由

路由路由起步监听地址栏的改变.根据改变渲染不同的组件基本使用下载安装路由npminstallvue-router创建路由表(项目下的一个router.js文件)引入vue和vue-routerimportvuefrom'vue'importvueRouterfrom'vue-router'在vue中使用vue-routervue.use(vueRouter)创建路由实例确定路径和组件的对应关系"/
jie_han·2023-06-12 12:38

vue路由传值的几种方式

顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效文章目录四种方式总结一、vue路由传值的四种方式？
z_星河·2023-06-12 07:14

从入门到进阶，Vue框架让Web开发更简单高效

在本文中，我们将会深入探索Vue框架的各个方面，包括Vue组件、Vue路由、Vue状态管理等，以及如何应用Vue框架构建出优秀的Web应用。
NasaYIN·2023-06-12 03:28

2019-04-03 Vue路由篇之 动动动动动态路由

这次老板的需求是路由通过后端配置好直接给我一个路由树生成侧边栏，也就是说现在前端并不需要控制权限了，没了角色的概念，路由完全靠后端给我，给我什么我就生成什么。这就有点匪夷所思，讲道理这套框架就是根据角色去筛选路由表，然后前端渲染，现在改写了路由逻辑，我是很蒙蔽的。既然需求就这样，废话不多说了，直接开干。项目就是老一套基于vue-element-adminpanjiachen大神的框架做的首先我们找
remix_huang·2023-06-11 21:13

关于uni-app与vue路由配置的不同，不使用uni.navigateTo接口跳转时，使用this.$router.push的踩坑经验

目录懵逼的一个小时uni-app与vue路由配置的不同非官方接口的另类写法错误编写：正确编写（只需写父组件即可，其他是多余）：懵逼的一个小时之前用vue写router路由的时候，先配置一个路由表，然后再将配好的路由
lqj_本人·2023-06-11 17:39

vue-----路由

vue-----路由使用vue-cli安装不需要另外安装路由，只需要在安装时候选择Manuallyselectfeatures，然后选到router按下空格就行**vue路由分为前端路由和后端路由路由配置
柒一柒·2023-06-10 23:46

Vue路由到新的页面，页面的名称需要改变

如下图：在页面中点击“属性列表”和“参数列表”的时候，要路由到新的页面，之后页面的title不用路由中的名称，而是用新的名称。也就是要显示对应的按钮名称，这个路由地址的名称是动态的。在旧的页面上加上：beforeRouteLeave，对应的title就是data中的数据，就可以动态变化了。当然还有其他方式。暂且研究这一种很好用，记录一下。data(){return{list:null,total:
飞鸟的心情·2023-06-10 23:42

Vue路由使用（router）

介绍vue-router相当于vue内部跳转链接，将需要切换的页面在vue-router里注册，在项目里配置就能完成页面的切换，它不仅能完成项目的切换，还能实现参数的传递，它还有个很重要的功能路由导航守卫（导航守卫分为前置导航守卫，后置导航守卫，组件内置导航守卫，常用就是前置导航守卫，设置用户登录可访问的界面和未登录可访问的界面，也相当于二次拦截，（axios请求拦截器是第一次拦截））。路由跳转和
一杆老狙·2023-06-10 00:06

vue路由原理

前端路由切换原理：本质就是监听url的变化，然后匹配路由规则，显示相应的页面，并且不刷新页面。目前单页面应用实现路由的方式只有俩种：hash模式history模式hash模式相当于瞄点跳转。监听url#后面的传值发生变化，从而触发window.hashchange方法。并根据值修改暂时页面的内容。不会刷新页面history模式相对hash模式更加符合我们常见的url格式。原理是触发了原生的wind
前端鲁班·2023-06-09 23:15

vue路由实现原理

答：前端路由实现原理主要通过以下两种技术实现的第一种：利用H5的historyAPI实现主要通过history.pushState和history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录[发布项目时,需要配置下apache]第二种：利用url的hash实现我们经常在url中看到#，这个#有两种情况，一
白嫖leader·2023-06-09 23:08

Ajax，前后端分离开发，前端工程化，Element，Vue路由，打包部署

Ajax介绍AxiosAjax-Axiosfunctionget(){//通过axios发送异步请求-get//axios({//method:"get",//url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"//}).then(result=>{//console.log(result.data);//})axios.get("http:/
枯寂麻辣·2023-06-09 17:59

vue路由中间件

背景在访问vue系统时，经常需要在进入路由前做一些全局处理或者登录状态校验，如果全部写在beforeEach函数中，内容会特别多，难以维护。需要将beforeEach中的内容拆分成多个中间件方法，按顺序执行。步骤1、注册中间件注册需要的中间件文件，以修改页面标题和登录校验为例router/middlewares/changeTitle.tsexportdefaultasync({to,next}:
不求甚解bc·2023-06-09 07:01

vue3 ---- 递归组件生成menu菜单 && 路由守卫鉴权

目录递归组件el-menu父组件子组件路由Vue路由守卫实现登录鉴权全局守卫路由独享的守卫组件内的守卫完整的导航解析流程菜单权限按钮权限对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的
前端 贾公子·2023-06-08 14:43

Vue路由鉴权

文章目录一、路由鉴权的条件二、实现方案一、路由鉴权的条件1.首先判断token是否存在2.如果存在判断token是否有效3.如果存在并且有效就放行，但是不能到login页面4.如果不存在或者token过期就按未登录处理5.未登录只能在login页面二、实现方案//引入routerimportrouterfrom'@/router'//引入nprogressimportnprogressfrom'n
忧郁火龙果·2023-06-08 11:23

vue路由详解

vue引入路由安装路由[email protected]引入路由importrouterfrom'./router'app.use(router)编写router/index.jsHash历史模式（/#/）Hash模式直接访问子路径不会报404，因为vue里面有内置配置import{createRouter,createWebHashHistory}from'v
船长@·2023-06-08 03:07

VUE路由传参的实用方式

本文讲解了VUE项目中路由之间的传值方式，涉及到的方法都是开发时常用的，希望对大家有多帮助。1.方式一：使用router-link标签1.1params传参首先定义好路由constroutes=[{path:‘/home’,component:()=>impo
蜗牛也要往上爬·2023-06-07 20:00

vue项目优化 （将优化进行彻底）

1.vue路由按需加载constactivityTheme=()=>import('@/views/activityTheme/activityTheme.vue')//活动主题页面2.vue生产版本去除
奇怪的双子座·2023-06-07 14:27

第12讲：ElementUI+Vue路由综合案例

本博文主要呈现一个NPM脚手架+Vue路由+ElementUI的综合案例，完成本案例需要有一定的Vue基础，请参考以下文章完成项目的构建第08讲：使用脚手架创建vue项目第09讲：路由开发第10讲：vue
大坏蛋^_^·2023-04-21 15:09

Vue路由传参params 与 query

一、路由传参分为params传参与query传参1.paramsparams传参类似于网络请求中的post请求，params传过去的参数不会显示在地址栏中（但是不能刷新）。params只能配合name使用，如果提供了path，params会失效。2.queryquery传参类似于网络请求中的get请求，query传过去的参数会拼接在地址栏中（?name=xx）。query较为灵活既可以配合path
coinisi_li·2023-04-21 08:55

Vue路由首次跳转加载不出某个组件或显示空白，刷新一次才可显示（遇到的坑）

routes:[{path:'/home',component:Home,meta:{showFooter:true}},//动态路由{path:'/search/:iptValue',component:Search,meta:{showFooter:true},name:'search'},{path:'/login',component:Login,meta:{showFooter:fals
小陈努力再努力·2023-04-21 07:59

第56期 深入探索Vue路由 & 他们所说的CDN究竟是什么 & 深度解析new原理及模拟实现

需求智能出码的思考|618淘系前端技术分享每年大促前一个月都是奋战与忙碌的时节，不仅业务上在不断迭代创新，技术上也在推陈出新，需求推动技术变革是一个正向演进的过程，但革新是需要成本的，每一次技术与标准的革新都带来一场翻天覆地的大改造。如果我们能将需求与产物划上等号：需求即代码，那么我们只要找到两者之间的关联关系即可通过需求自动产出代码了，那岂不是乐哉美哉(diaozhatianle)。他们所说的C
前端收藏家·2023-04-21 05:15

（7）VUE报错data functions should return an object

直译过来也是:数据方法应该返回一个对象.......出现问题后，VUE路由切换也出问题了，然后报错也给指明了：image.png最后发现是data数据里面return直接写了分号(我蠢...排查了几分钟
myako_·2023-04-21 02:24

vue路由route的restful风格传参

前面讲了vue的ref传值和bus总线传值CSDN，父组件给子组件传值CSDN，子组件给父组件传值CSDN四种传值方式，以及路由的两种跳转方式，本篇文章再介绍一下vue的路由restful风格(表述性状态转移)传递参数值的方式。1、准备工作：参考上一篇文章CSDN配置动态路由。2、在映射表中的path后加上/：参数名，这里写了参数名id和name。"path":"/list/:id/:name"3
一只小虾米~~·2023-04-20 03:16

vue报错：ReferenceError: VueLoaderPlugin is not defined

安装vue路由遇见上图报错，然后网上扒拉发现有报错ReferenceError:VueLoaderPluginisnotdefined，然后发现少了一行代码：constVueLoaderPlugin=require
夜上夏叶·2023-04-19 22:31

Vue路由

Vue路由简介1、配置router/index.jsredirect：当访问的是’/‘的时候，让它访问另外一个路径比如’emp’2、添加请求链接组件3、添加动态视图组件router/index.jsimportVuefrom'vue'importVueRouterfrom'vue-router
破烂儿·2023-04-19 05:26

VUE3的使用

Components组件1、组件基础2、组件交互3、自定义事件的组件交互4、组件生命周期5、引入第三方组件三、网络请求及路由配置1、Axios网络请求2、Axios网络请求封装3、Vue引入路由配置4、Vue
帅得真的是无敌了·2023-04-18 15:13

Vue路由

vue路由文章目录vue路由1.vue-router简单使用1.1vue-router的下载1.2在main.js1.3router的配置1.4路由的切换1.5路由指定位置的显示2.嵌套路由2.1多级路由的配置
code袁·2023-04-18 13:50

vue路由入门

vue-router用于实现页面的跳转，例如点击Home按钮，进入Home页面，点击About按钮，进入About页面一、基本路由1.在src中新建两个vue文件，分别为home.vue和about.vueHome{{msg}}exportdefault{data(){return{msg:"这是Home页"};}};About{{msg}}exportdefault{data(){return{
一个疯子a·2023-04-18 03:36

前端面试题——vue路由守卫

vue路由守卫？
跟着阿龙学编程·2023-04-18 01:45

Vue路由传参props解耦的三种方式小结

目录路由组件传参布尔模式对象模式函数模式总结路由组件传参在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了其灵活性。使用props将组件和路由解耦：布尔模式商品展示界面传递id的动态参数这是首页-->{{item.name}}{{item.price}}路由配置动态参数和开启props解耦{path:'/detail/:id',name:'Det
·2023-04-18 01:18

vue路由懒加载的原理

学习Vue的时候，各类教程都会告诉我们：Vue的特点是SPA——SinglePageApplication（单页应用程序）。它有着诸如：“只有第一次会加载页面,以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力”等等优点。但是呢！因为Vue是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上
变量只提升声明不提升赋值·2023-04-17 01:43

VUE B/S架构搭建之配置路由和前后端交互

VUE路由配置1、安装路由插件cnpminstallvue-router--save-dev2、在src/router/index.js中引入注册配置扩展：@表示src这个在webpack中配置用@表示
前端ironFive·2023-04-14 22:17

基础语法2 - vue路由介绍

目录1.基础语法2-vue路由介绍1.样式绑定2.事件修饰符3.按键修饰符4.常用控件4.1常用控件示例4.2修饰符5.自定义指令5.1局部5.2全局6.vue组件（重点）6.1组件介绍6.2局部组件6.3
嘴强程序员·2023-04-14 15:00

Vue路由传参（params 与 query）

理解：路由传参分为params传参与query传参，params传参类似于网络请求中的post请求，params传过去的参数不会显示在地址栏中（但是不能刷新）。params只能配合name使用，如果提供了path，params会失效。query传参类似于网络请求中的get请求，query传过去的参数会拼接在地址栏中（?name=xx）。query较为灵活既可以配合path使用，也能配合name使用
一只大黑洋·2023-04-14 13:12

vue路由传参（使用query传参页面刷新数据丢失问题）

vue路由传参（使用query传参页面刷新数据丢失问题）1.路由传参的两种方式1.params传参（刷新页面数据会丢失）2.query传参（刷新数据不会丢失）2.使用query传参页面刷新数据丢失问题1
无·糖·2023-04-14 13:34

vue路由跳转不回到顶部的问题

路由跳转后页面滚动条依旧在上一个路由的位置。每次进入路由我需要置顶显示，方案如下。a.main.js中添加如下代码：router.beforeEach((to,from,next)=>{//chromedocument.body.scrollTop=0//firefoxdocument.documentElement.scrollTop=0//safariwindow.pageYOffset=0n
简爱的三年·2023-04-14 02:01

vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

目录vue路由跳转打开新窗口和关闭窗口编程式导航window.open()方法关闭窗口window.close()vue路由跳转打开新窗口(被浏览器拦截)第一种方法第二种方法第二种方法（改良版）总结vue
·2023-04-14 01:55

vue路由中hash模式

vue路由中hash模式importVuefrom'vue'importRouterfrom'vue-router'import{router}from'.
&Cy·2023-04-13 19:48

关于vue路由跳转之后页面停留在上一个浏览页面位置不会回到顶部问题

我一般处理方法在src目录下新建文件文件里边用路由守卫监听每次跳转回到顶部importrouterfrom'./router'router.beforeEach((to,from,next)=>{document.body.scrollTop=0//firefoxdocument.documentElement.scrollTop=0//safariwindow.pageYOffset=0next
A . 阿冰·2023-04-13 18:31

vue路由跳转的四种方法

vue路由跳转有四种方式router-linkthis.$router.push()(函数里面调用)this.$router.replace()(用法同push)this.
海贼`王路飞·2023-04-13 16:27

Vue 详解VueRouter路由的实现方法和重点内容，倾情打造！

文章目录1Vue路由的实现模式1.1hash1.2history2路由的基本概念与原理2.1后端路由2.2前端路由2.3实现简易前端路由3vue-router的基本使用3.1基本使用步骤3.1.1引入相关的库文件
Silly夏·2023-04-13 11:25

Vue路由模式为history的项目部署到Nginx

前言对于前端工程师而言，多多少少会碰到按需加载的需求。比如一个系统，需要用户登陆以后才能使用，对于传统的前后端未分离的情况，我们一般的处理方式是，当检测到用户未登录的时候，一般会重定向到登录页面，让用户进行登录。但是对于前后端分离的情况，前端工程师一般倾向于单页面的处理模式，而想要处理这种情况的话，我们一般传统的做法是，会选择采用location.search的方式，即通过参数来判断。比如检测到用
l386913·2023-04-13 07:32
上一页 7 8 9 10 11 12 13 14 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他