vue路由

简单分析Vue路由--前端小白也能开发vue电商项目（2）

image路由是什么？为什么要使用路由？路由有什么功能？可以写出路由跳转的源码吗？写完路由部分，四连打击让我深思，一起来学习一下vue的翅膀Vue-Router吧~这是一个基于vue&axios&mock&token&stylus&Cube-UI的电商项目demo，面向vue初学者，场景虽简单，但五脏俱全。涵盖非常多的vue及其相关技术的基本操作。有详细的注释，帮助大家快速上手vue。Github
大张技术栈·2023-03-12 18:51

axios减少重复请求数据 keep-alive

image.pngVue路由开启keep-alive时的注意点：https://blog.csdn.net/qq_32786873/article/details/71171713exportdefault
阳光之城alt·2023-03-08 22:33

RangeError: Maximum call stack size exceeded，Vue路由无限循环跳转。

项目场景：业务是根据打开的环境进行不同的操作，一下就是想到用Vue导航守卫来做，每次进入路由的时候都会根据环境做不同的操作。问题描述：一开始是这么写的，手快咔咔就一顿操作哈哈哈，相关业务代码就码上了哈。但是这时候就进了死循环了哈哈哈原因分析：在走else的时候，使用next({path:'/404'})跳转到404页面，但是在跳转之前就触发了beforeEach导航守卫，然后又走了else，导致每
Delete_89x·2023-02-28 12:19

Vue路由最全详解 创建路由

vue安装路由安装：npmivue-router@next-S安装vue3下的路由步骤：1.创建一个路由文件router.js2.导入路由模块import{createRouter,createWebHashHistory}from'vue-router'3.引入要链接的组件importtest01from'./components/test01.vue'4.创建路由路径constroutes=[
Tone@·2023-02-24 12:00

解决VUE路由跳转出现Redirected when going from "/xxx" to "/yyy" via a navigation guard.报错

解决方式：1.对vue-router降低版本到3.0.7，手动修改就行了21388354-0ae67c66cee522bf.png21388354-8992e94846dfe588.png修改完之后记得删除原来的node_modules文件，再使用npmi或yarninstall生成新node_modules文件2.第一种不行的小伙伴可以使用第二种是重写router.push()方法,直接复制下面
JavaScript天下第一·2023-02-19 08:28

vue路由

1.路由vue的核心插件2.根据不同的url访问不同的页面创建单页面SPA(SINGLEPAGEAPPLICATION)应用首页用户页//2.创建组件varHome={template:`这是首页`}varUser={template:`这是用户页`}//3.配置路由constroutes=[{path:'/',component:Home},{path:'/home',component:Hom
习惯h·2023-02-07 09:18

vue路由不变的情况下，如何实现刷新页面

provide/inject的方式这种方式，就是让通过provide让App.vue为所有子孙页面注入一个reload的方法，然后在需要使用的页面，通过inject注入即可App.vueexportdefault{name:"App",provide(){return{reload:this.reload};},data(){return{isRouterAlive:true};},methods
前端阿峰·2023-02-06 06:09

vue打包后报错TypeError: Cannot read property ‘call’ of undefined解决方法 - 2021-09-18

在webpack构建打包vue项目后，上传到服务器页面报错提示TypeError:Cannotreadproperty'call'ofundefined一般大多数出现这类问题都是在vue多页应用、vue
Hilberts_hotel·2023-02-05 20:53

vue 路由传参的三种方式

vue路由传参方式params//用法：{path："/home/：name"，name："home"，component：home}//取值：this.
无名程序猿·2023-02-05 17:53

Vue路由基础知识点

vue构建importVueRouterfrom"vue-router";Vue.use(VueRouter);constroutes=[{path:"路径",name:"名字",component:组件名}]；constrouter=newVueRouter({routes,mode:"history"});//mode设置后路径不会出现/*/newVue({router,render:h=>h
星河光影·2023-02-03 10:44

vue路由

配置引入src文件夹下的main.js文件内写入以下代码importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)在main.js里创建和挂载实例newVue({el:"#box",router：VueRouter});htmlOneTwo路由匹配到的组件将渲染在这里jsvarroutes=[{path:"/one",co
相信自己_胡·2023-02-03 06:22

vue路由传参.md

两种传参方法1.命名路由传参(name,params方式)this.$router.push({name:'users',params:{userId:1243}})2.路由路径传参(path,query方式)this.$router.push({path:'/user',query:{id:12}})两种获取路由传参(注意：是$route)1.params获取this.$route.params
_无为_·2023-02-02 01:50

vue路由跳转时定位到页面顶部的方法

路由跳转时进入新的页面，但是在上个页面浏览的位置，没有回到顶部。搜索了一下，总结了两个小方法：方法一：在router.js配置：方法二：在main.js入口文件写入：
爱抹茶的小狮子·2023-02-01 23:14

Vue路由和路由器简介

前言路由(route)是vue中非常重要的技术，几乎每一个用vue所写的项目都会用到路由，它是一个vue的插件库，专门实现SPA应用路由(route)的简介说到路由，大多数人会想到路由器(router),可以这么说，路由器上的每一个口都是一个路由，对接着一台设备，一个路由器上有多个路由，简单来说就是：1路由就是一组key-value的对应关系key一般是路径，vaule为组件(component)
小花皮猪·2023-02-01 21:31

修改路由的title

但是页面的路由标题需要和点击的按钮进行匹配，例如现在有四个按钮：按钮1，按钮2，按钮3，按钮4，跳转到对应的页面时路由的标题展示为：详情+按钮名称；技术栈Vue全家桶+ElementUI+ES6+Axios实现通过vue
小人物的秘密花园·2023-01-31 20:55

解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location

vue-router3.0以下版本2、为每一个Promise添加一个回调函数3、修改VueRouter原型对象上的push/replace方法四、原理分析五、额外补充1、路由导航方式2、Promise函数总结点击vue
·2023-01-31 03:26

vue路由守卫 - 全局

前言vue中用路由守卫来做是否登陆判断，此处我以后台管理项目为例，如下图：admin.jpg主要方法：router.beforeEach((to,from,next)=>{})to：进入到哪个路由去from：从哪个路由离开next：路由的控制参数，常用的有next(true)和next(false)首先判断进入的是否是login页面？然后再判断是否已经登陆？已经登陆了就进入你要跳转的页面，没登录就
可怜的小黑兔·2023-01-30 21:15

vue路由传递参数的几种方式

路由跳转传参可分为三种1）name传递router.js中配置{path:'/detail',name:'detail',component:Detail}在命名路由的时候会有一个name值，可在相应页面以我是{{$route.name}}页面的方式获取2)router-link中的to方法，采用url传参（声明式跳转）2.1js中使用this.$route.params.id来获取，页面中{{$
William_web·2023-01-30 20:21

vue路由的使用(简单理解)

Document尺寸.comHOMENEWS//1、定义路由所需的组件consthome={template:"首页"};constnews={template:"新闻"};//2、定义路由每个路由有两部分path(路径)，component(组件)constroutes=[{path:"/home",component:home},{path:"/news",component:news}];/
·2023-01-28 18:37

vue2路由手动创建&二级路由&路由传参&路由守卫&打包上线

about和home两个路由，我们先定义两个组件定义页面级组件，创建views文件夹，然后创建Home.vue和About.vue3.在src目录下创建router文件夹，并在其内创建index.js作为vue
青青子衿越·2023-01-28 15:34

vue路由守卫的写法

router.js(全局守卫)importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importchildfrom'../components/child.vue'importchild1from'../components/child1.vue'Vue.use(VueRouter)con
gunsmoke·2023-01-28 15:33

【vue2】对路由的理解

本文核心：vue路由概念、路由写法、路由模式、路由重定向、路由跳转传参方式目录一、vue路由概念1.概念：2.初体验：二、路由基础1.路由模式2.路由写法总结手动自动配置区别：三、路由重定向与二级路1.
初映CY的前说·2023-01-28 15:02

Vue路由的详细介绍（路由传参，跳转，守卫）

路由传参query传参直接在请求路径后面以键值对的形式传递参数的形式为query传参通过$route.query读取对应参数params传参直接在请求路径后面接参数且需要在对应路由中使用占位符声明接收params参数通过$route.params读取对应参数router-link标签中to的对象写法to必须为动态数据绑定若为query传参to对配置对象为path和query若为params传参to
小白-先森·2023-01-28 15:02

vue路由的介绍（三）--编程式导航和history

注：关于路由的详细介绍可以看文档：https://router.vuejs.org一，编程式导航传统的跳转组件方式是通过来实现的，而编程式导航则是通过js的方式实现跳转。具体我们来看一下实际代码：二，命名路由给路由配置时，加上命名路由：然后就可以直接根据名称调用：三，history的用法让路由变得好看些，路由默认是用hash来模拟完整的url。history配置如下：（#消失）
汉堡大痴·2023-01-28 12:49

vue路由的使用(简单理解)

Document尺寸.comHOMENEWS//1、定义路由所需的组件consthome={template:"首页"};constnews={template:"新闻"};//2、定义路由每个路由有两部分path(路径)，component(组件)constroutes=[{path:"/home",component:home},{path:"/news",component:news}];/
·2023-01-26 11:27

Vue项目实战 可视化 创建（vue2+Element ui) 并 创建远程仓库

Vue项目实战创建项目通过脚手架创建项目配置vue路由配置element—ui组件库配置axios库创建远程仓库初始化git远程仓库将本地项目托管到码云前端项目初始化步骤①安装vue脚手架②通过脚手架创建项目
半生过往·2023-01-26 05:03

vue-big

目录01、v-if和v-show指令02、Vue路由拦截03、Vue中父子组件生命周期钩子函数的执行顺序04、MVVM05、v-for和v-if06、Vue中的data07、v-model08、route
牧碼人·2023-01-23 08:39

vue路由history模式页面刷新404解决方法Koa Express

目录为什页面刷新会出现404Node服务使用Koa框架Node服务使用Express框架为什页面刷新会出现404因为vue项目中路由hash模式改为了history模式，由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下当刷新页面之后浏览器会直接去请求服务器，而服务器没有这个路由，于是就出现404。那为什么页面跳转就是正常的？跳转时其实不是通过请
·2023-01-23 00:36

vite插件

vite插件编写：自动生成Vue路由：思路：使用resolveId和load两个钩子函数load：主要是用来对==文件源码==进行修改的resolveId：主要是用来匹配文件的目的：不用手动去配置路由表
神也佑我YK·2023-01-20 14:47

vue路由跳转后刷新指定页面的方法

做项目遇到一个坑：A页面带参跳转到B页面，第二次跳转时的参数与第一次时的参数不同，但是后台查询时还是使用的第一次的参数。需要手动刷新之后，才会使用第二次参数。鉴于时间原因直接使用刷新页面监听路由的方法。在准备跳转的A页面添加路由跳转监听事件，达到每次A页面跳转B页面时，B页面都会再次重新加载页面。添加完成后，A页面跳转B页面，B页面成功刷新。正当我高兴的以为又解决了一个bug时，突然发现我从A页面
·2023-01-19 06:28

前端代码部署到nginx后，刷新报错404

前端代码本地运行没问题，部署到nginx后，刷新报错404.vue路由模式改为history后，需让后端nginx配置try_files，否则资源访问不到。
有志小王·2023-01-18 03:06

2021-07-08

2021年最新Web前端面试题精选大全及答案目录HTML、CSS相关Javascript相关三者的异同Vue相关55.Vue路由懒加载（按需加载路由）React相关react生命周期函数******为什么虚拟
weixin_54719836·2023-01-14 06:43

vue路由的导航守卫

1.介绍：vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。每个守卫接受三个参数：（1）to:即将要进入的目标路由对象（2）from:当前导航正要离开的路由(3)next:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。如果next函数没有执行或是传入了false等值，这个跳转就会被终止掉。2.全局守卫只要触发了路由就会触发路由前置和后置守卫（1
快乐的二进制鸭·2023-01-10 03:50

Vue路由导航守卫

导航守卫的作用：保护路由的的安全（权限），类似于“御前侍卫”分类：全局守卫、独享守卫、组件内守卫使用导航守卫时，一般要对路由进行命名（name）一、全局路由守卫需要在暴露router之前设置1.全局前置路由守卫●通过beforeEach()实现，在初始化以及每次路由切换之前和初始化会调用里面的函数●该函数接受三个参数to,from,next○to：要跳转到的目标路由，可以获取到目标路由的信息○fr
知识园·2023-01-10 03:05

2023前端二面必会vue面试题指南

action与mutation的区别mutation是同步更新，$watch严格模式下会报错action是异步操作，可以获取数据后调用mutation提交最终数据Vue路由hash模式和history模式
·2023-01-06 11:02

Vue路由 传参几种方式

①动态路由传参{path:'detail/:username?',name:'a',component:()=>import('@/components/Detail.vue')}新闻详情页1http://localhost:8081/#/news/老郭该种方式最为简单，:username相当于接收一个动态参数，随路由跳转时携带，在目标组件内进行接收，参数会在地址栏最后，组成地址的一部分，如果不传
_Rookie._·2022-12-25 17:03

Vue路由+Tab组件实现多页签功能

在vue单页面应用中，当点击导航菜单时会切换路由，一般是在中间的router-view路由视图中直接显示对应路由的页面组件，那么本编就介绍一下如何使用vue路由配合tab组件实现多页签功能，打开一个新的菜单路由时变成弹出一个新的
·2022-12-19 21:10

【Vue路由】路由的简介及基本使用

文章目录路由的简介路由的基本使用几个使用路由的注意点组件分类组件去向路由组件路由的简介再说路由之前，我们先来看看生活中的路由器，它的作用就是让多台设备同时上网，同时每一个接口对应一个网络设备：我们可以这样来看，我们把接口当作key，电脑设备当value，一个key对应一个value：而路由就可以理解为一种对应关系，：路由在英文中为route路由器在英文中为router我们总结一下：路由就是一组ke
十八岁讨厌编程·2022-12-16 07:12

vue路由传参 params传参不能传对象

不能传对象，传对象的时候，刷新完数据会丢失传递的是一个对象但是：跳转以后，刷新页面，数据会丢失，所以说不能传对象，会有问题
huanxiaD·2022-12-16 07:11

vue路由详解【多级路由+路由守卫】

文章目录六、路由6-16-1-16-1-26-1-3基本使用：6-1-4几个注意点6-1-5多级路由6-1-5-16-1-5-2query参数6-1-5-3命名路由6-1-5-4路由的params参数6-1-5-5路由的props配置6-1-5-6.``````的replace属性6-1-5-7编程式路由导航6-1-5-8缓存路由组件6-1-5-9两个新的生命周期钩子6-1-6路由守卫6-1-6-
翼遥bingo·2022-12-16 07:08

vue路由的使用

路由1.理解:一个路由(route)就是一组映射关系(key-value),多个路由(routes)需要的路由器(router)进行管理2.前端路由:key是路径,value是组件1.基本使用安装vue-router,命令:npmivue-router引入vue-router之后应用插件:Vue.use(VueRouter)编写router配置项//该文件专门创建整个应用的路由器importVue
不为霜停·2022-12-16 07:08

【Vue路由】多级路由、路由传参、命名路由、params使用

文章目录多级路由案例实验总结路由传参案例实验总结命名路由路由的params参数多级路由案例实验我们尝试做出如下的效果：首先项目结构：我们直接看四个路由组件：About.vue我是About的内容exportdefault{name:'About',}Home.vueHome组件内容NewsMessageexportdefault{name:'Home',}Message.vuemessage001
十八岁讨厌编程·2022-12-16 07:36

Vue路由跳转方式区别汇总（push，replace，go）

目录声明式导航router-link1.不带参数2.带参数编程式导航1、this.$router.push2、this.$router.replace3、this.$router.go(n)总结区别：在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式
·2022-12-15 18:09

前端面试题之【Vue】

1.组件间交互2.vue生命周期3.newvue之后4.Vue优缺点5.虚拟DOM优点6.key作用7.diff算法8.Vue双向绑定原理9.nextTick原理10.Vue路由11.Vuex原理12.
咔叽布吉·2022-12-14 03:18

Vue实现路由跳转至外界页面

目录Vue路由跳转至外界页面解决办法Vue路由跳转页面的几种方式总结Vue路由跳转至外界页面用法如果使用路由是在vue页面中来回跳转，可以使用this.
·2022-12-13 18:16

vue路由

1、2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数Vue-router路由守卫全局导航钩子（跳转前进行判断拦截）rout
keepRuning9·2022-12-12 10:55

vue路由第二次进入页面created和mounted不执行问题及解决

目录vue路由第二次进入页面created和mounted不执行vuecreated、mounted等方法整理总结vue路由第二次进入页面created和mounted不执行因为路由中created和mounted
·2022-12-07 19:18

vue路由传参当刷新页面时，参数变成“[object Object]”

前言通常我们需要通过路由携带传递参数，大概有三种写法：1）地址后面直接带参数2）query传参3）params传参由于params传参刷新页面，会导致数据丢失。所以采用query传参方式比较多。问题描述首先，用的query传参方式，如果传参是一个对象，点击进入页面路由可以获取对象的值；但是刷新页面会导致获取不到对象值，被强制转换为字符串"[objectObject]"，导致数据不能使用。tempO
铁锤妹妹@·2022-12-04 15:21

vue 路由判断方式

目录vue路由判断vue路由判断跳转404页面vue路由判断解决的一个问题分享。我的需求是从特定的页面进入当前页面会执行一个定时器来增加阅读人数，当进入该页面15秒后浏览人数会增加1。
·2022-12-03 08:08

「需求广场」需求词更新明细（十五）

141springboot常用注解2清华镜像源72rgb颜色表142pandas读取txt文件3pycharm怎么改成中文73tensorflow-gpu测试代码143ajax经典实例大全4grep命令74vue
CSDN文库小助手·2022-12-01 09:52
上一页 10 11 12 13 14 15 16 17 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他