VUE路由

vue路由两种引用方式的区别

1.开发环境vue2.电脑系统windows10专业版3.在使用vue的过程中,我们需要配置路由,下面我来分享一下引用路由的方式的区别。4.废话不多说,直接上代码:importVuefrom'vue'importVueRouterfrom'vue-router'//1、直接把组件引入进来,不关路径访问或不访问,都把组件引用进来importHomefrom'../views/Home.vue'imp
·2021-03-11 19:49

【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面

文章目录0.项目介绍电商管理系统（Element-UI）开发模式前端技术栈后端技术栈1.配置——初始化前端项目①安装Vue脚手架②通过Vue脚手架创建项目③配置Vue路由④配置Element-UI组件库
YK菌·2021-03-11 13:19

Vue路由实现（四）:router-view和router-link的实现原理

使用首页关于router-view组件exportdefault{//函数式组件没有this不能new没有双向数据绑定，通常用的比较少，比较适用于展示详情页因为详情页只展示不进行修改等操作，函数式组件比有状态的组件更加轻量级。functional:true,render(h,{parent,data}){parent表示的父组件appdata是行间属性(上面代码a=1)也可以使用prop传递let
·2021-03-09 22:20

Vue路由实现（三）:hash跳转原理

在newvueRouter的时候我们可以传入一个mode属性，他可以接收三个值：hash/history/abstracthash和history的区别history的路径更美观一点比如http://yoursite.com/user/id,history是基于pushState()来完成URL跳转而无须重新加载页面。但是强制刷新还是会有问题（服务端来解决这个问题），所以history模式需要后端
·2021-03-09 22:19

Vue路由实现（二）:macther中的addRoutes原理

macther是什么？根据用户传递的routes创建匹配关系,它里面提供两个方法：addRoutes和matchclassVueRouter{constructor(options){//createMatcher返回addRoutes和match两个方法this.matcher=createMatcher(options.routes||[]);}init(app){}}编写createMatc
·2021-03-09 22:41

Vue路由实现（一）:Vue.use(Router)中做了什么？

引言接下来几篇文章写一写最近学习的Vue中的路由原理吧。那么在讲原理之前我们先来看看它是如何使用的。路由的使用importVuefrom'vue'importRouterfrom'vue-router'importHomefrom'./views/Home.vue'importAboutfrom'./views/About.vue'Vue.use(Router);//使用Vue-Router插件e
·2021-03-09 22:34

VUE 实战项目：电商管理系统(Element-UI）

一.项目初始化步骤1.安装Vue脚手架2.通过Vue脚手架搭建项目3.配置Vue路由4.配置Element-UI组件库5.配置axios库6.初始化远程git仓库111
L1147484597·2021-03-04 15:12

2021/03/03之Vue路由params、query参数丢失解决

在vue中路由传参有两种形式：1.params；2.query解决办法：sessionStorage或者localStorage两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除首先有两个页面，通俗点页面一和页面二；页面一给页面二传递路由参数params参数this.id=666this.$router.push({name:'页面二',pa
六卿·2021-03-03 09:01

vue路由传参

1.开发环境vue+vant2.电脑系统windows10专业版3.在使用vue开发的过程中,我们经常会使用到传参,下面我来分享一下vue简单的路由传参,希望对你有所帮助。4.通过路由属性中的name来确定匹配的路由,通过params来传递参数,在template中添加如下代码:5.在methods中提娜佳如下代码:toEdit(item){this.$router.push({name:"add
·2021-02-26 15:42

vue路由传参

1.开发环境vue+vant2.电脑系统windows10专业版3.在使用vue开发的过程中,我们经常会使用到传参,下面我来分享一下vue简单的路由传参,希望对你有所帮助。4.通过路由属性中的name来确定匹配的路由,通过params来传递参数,在template中添加如下代码:5.在methods中提娜佳如下代码:toEdit(item){this.$router.push({name:"add
·2021-02-19 15:58

vue路由改变了数据和内容不变的解决办法

场景：1.路由改变了但是数据和内容没变，刷新后才变化2.动态路由/cate/:id/index.html类似这样只改变id号的场景,由于router-view是复用的，单纯的改变id号并不会刷新router-view解决办法有两种：【1】【2】【1】给router-view添加key形如，:keyvue为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的ke
赵Wayne·2021-02-15 20:22

vue 基于abstract 路由模式 实现页面内嵌的示例代码

abstract路由模式abstract是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面
·2021-02-07 14:10

vue-router的使用，以及路由守卫的使用，复制直接用！

importVuefrom'vue'//引入VUE实例importVueRouterfrom'vue-router'//引入vue路由Vue.use(VueRouter)//vue实例调用路由constroutes
前端攻城狮路飞·2021-02-02 12:50

Vue路由:导航守卫

//1.router.beforeEach()-在url路径改变,但是路由页面出现之前,先被这个方法里的函数体执行一遍//如果遇到next()就正常跳转到你本该去的路由路径,如果next("路径")-就不跳转到原来的路径了而是去这顶的这个路径查看letisLogin=false;//未登录模拟router.beforeEach((to,from,next)=>{//to:要去到的路由对象的信息//
北秋go·2021-01-25 21:10

Vue路由：this.$router和this.$route的区别

this.$router（代表全局的路由对象）this.$router全局路由对象，任何页面都可以通过此方法调用push(),go()等方法。一般用于路由跳转。this.$router.push(路由)跳转指定路由方式(传参：query与params)：query方式传参路由的属性名是“path”，params方式传参路由的属性名是“name”this.$router.push({name:'pa
北秋go·2021-01-24 22:54

qiankun 微前端应用实践与部署（三）

关于路由qiankun在主应用初始化会自动监听路由的变化去匹配注册好的子应用路由活动规则，同时vue路由也会监听路由变化。因为主应用有自己的业务模块，需要支持页面刷新，所以采用hash路由模式。
·2021-01-23 02:03

Vue路由：嵌套路由

html页面body{background-color:#eee;}#app{background-color:#fff;width:500px;margin:50pxauto;box-shadow:3px3px3pxrgba(0,0,0,0.5);padding:2em;}.box{padding:1em;border:1pxsolid#ccc;margin:1em;}主页新闻体育constro
北秋go·2021-01-19 22:25

Vue总结1.0（初步）

Vue总结1.0（初步）了解Vue.jsVue基础Vue生命周期函数Vue组件Vue路由Vue-cli一、了解Vue.jsVue.js是一个优秀的前端界面开发JS库。
与宇宙对视·2021-01-17 11:24

vue实战

vue实战项目初始化前端项目初始化步骤安装vue脚手架通过vue脚手架创建项目配置vue路由配置element-ui组件库配置axios库初始化git远程仓库将本地项目托管到github或码云中项目初始化前端项目初始化步骤安装
Jack D·2021-01-16 22:19

vue路由缓存 终极解决方案

作者：waker前言业务里经常有这样的需求,页面跳转的时候保持前一个页面的状态跟数据,方便返回时处理例如:A->B需要缓存,A->C不需要缓存网上大部分例子都需要去处理业务组件,感到非常不合理故自己分享改功能用来处理此类问题vue的keepAlive组件很适合解决这类问题,但还是有缺陷,比如很难灵活的根据路由来控制是否需要缓存,只能简单的通过include来匹配是否需要缓存整理后需求如下:1.组件
waker·2021-01-14 02:13

vue路由缓存 终极解决方案

作者：waker前言业务里经常有这样的需求,页面跳转的时候保持前一个页面的状态跟数据,方便返回时处理例如:A->B需要缓存,A->C不需要缓存网上大部分例子都需要去处理业务组件,感到非常不合理故自己分享改功能用来处理此类问题vue的keepAlive组件很适合解决这类问题,但还是有缺陷,比如很难灵活的根据路由来控制是否需要缓存,只能简单的通过include来匹配是否需要缓存整理后需求如下:1.组件
waker·2021-01-13 20:50

Vue路由Router钩子（全局2+组件3+配置2）

路由钩子一.导航守卫(全局钩子*2)一般在全局的路由配置中设置//前置守卫还没有出from的路由router.beforeEach((to,from,next)=>{to:即将要进入的目标路由对象from:当前导航正要离开的路由next:一定要调用这个方法不然会停在一个白板页面的next()允许跳转next(false)不允许跳转next('url')跳转到指定url})//后置守卫已经进入到to
小王几pl·2021-01-09 13:23

Vue路由-VueRouter（核心插件）

1、路由原理1、需要路由的原因：传统开发方式url改变后，立刻发生请求，响应整个页面，有可能资源过多，传统开发会让页面出现白屏的现象，或者加载慢！2、路由原理：SPA(SinglePageApplication)单页面应用锚点值改变，不立刻发送请求，而是在合适的时机发Ajax请求，局部改变页面数据（改变页面的局部组件）3、优点：页面不立刻跳转用户体验好4、模拟路由的实现1.定义一个a标签，2.用w
一声蔷薇udVkP·2021-01-06 02:43

Vue路由对象属性 .meta $route.matched详解

$route.fullPath1路由是：/path/:type真正路径是：/path/list2path匹配路径:/path/list3fullPath匹配路由:/path/:type路由元信息.meta12345678910111213141516constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,children:[{pat
lu92649264·2021-01-04 09:01

vue路由传参和sessionStrong,localStorage

1.vue中的路由跳转可以通过路径跳转,页可用通过路由的name属性进行跳转2.路由跳转是携带参数有两种方式this.$router.push({name:'xxxx',params:{}})this.$router.push({name:'xxxx',query:{}})值得注意的是:params传参时,F5刷新是参数会丢失,query传参则不会另外,如果不想使用路由传参,可以考虑使用sessi
qq_45717722·2021-01-01 23:59

before vue路由钩子_VUE路由拦截：Vue自定义全局弹窗组件

点击右上方红色按钮关注“web秀”，让你真正秀起来前言在任何一个平台中，如果需要增加用户黏度，除了用户需要的基本内容外，用户登录注册提交信息也是非常重要的一环，可以了解用户基本信息，用户喜欢等。抛出前后端混合开发外，vue可以轻松的实现路由拦截。VueRouter对路由集中统一管理，所以我们可以在main.js中添加如下代码，对所有路由进行拦截：router.beforeEach((to,from
陈村·2020-12-31 00:42

vue.js刷新当前页面的实例讲解

$router.go(0)，vue路由里面的一种方法；
·2020-12-29 20:38

vue 路由id_vue路由详解

自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。安装直接下载/CDNUnpkg.com提供了基于NPM的CDN链接。上面的链接会一直指向在NPM发布的最新版本。你也可以像在Vue后面加载vue-router，它会自动安装的：NPMnpminstallvue-router如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：im
小离的私家笔记·2020-12-23 03:16

vue同一路由控制不同页面跳转_vue路由对不同界面进行传参及跳转的总结

最近在做一个公众号的商城项目，主要用的VUE+MUI，其实今天这个点对于有过项目经验的前端工作者来说是最基础的，但也是必须要掌握的，今天小编主要是记录下传参和跳转的一些总结(仅供参考)。首先我们先上代码吧！点击编辑这个是我常用的传参及跳转路由的方法，下面剪短说一下这个代码，在router-link中:to后面跟着的就是主角(跳转、传参)的内容了，其实我们在从后台拿到数据遍历后，每一个对应的id都会
weixin_39943370·2020-12-22 13:57

vue切换路由不重新渲染_Vue 路由切换时页面内容没有重新加载的解决方法

Vue路由切换时页面内容没有重新加载的解决方法第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。
weixin_39603327·2020-12-22 09:11

05.vue路由

一.路由的概念与原理路由的本质就是一种对应关系，比如我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1.1后端路由后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。由服务器端进行实现，并完成资源的分发。1.2前端路由前端
豆约翰·2020-12-21 23:02

Vue 路由知识点归纳总结

vue路由的原理说实话，路由我一直也就光顾着用，没认真思考过这个问题，还是那次人家面试问了这个，我才反应过来是应该好好的了解一下了。
林雪·2020-12-21 11:58

vue路由嵌套

1.vue路由嵌适用套场景最近自娱自乐用vue做小东西，觉得路由js里代码太乱了，就想着用一下路由嵌套来着。
GHUIJS·2020-12-18 02:05

vue路由模式nginx配置history模式--可刷新

1.hash模式：hash模式下，地址栏多出一个‘#’号，当‘#’号后面的hash值改变时并不会发起后台请求也不会刷新页面。这在SPA中可以更流畅的进行页面(组件)切换。原理：window对象中的onhashchange对象方法。浏览器会记录下每次切换的hash，因此前进跟后退都可用。影响：在实际应用中其实并没有什么影响，就是导航地址看起来乱2.history模式：history模式跟hash模式
Casso·2020-12-17 20:26

Vue-router中hash模式与history模式的区别详解

VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，这个题其实就是考验你的开发经验是否属实。小白回答：hash模式url带#号，history模式不带#号。
·2020-12-15 17:15

vue路由卫士&vuex命名空间

关于vue的两个比较重要的部分：路由和vuex，推荐学习官方文档，讲的十分清楚和明白，配合自己动手实践更容易掌握vue路由卫士详解官方文档：https://router.vuejs.org/zh/guide
三千不易留·2020-12-14 14:02

vue 基于abstract 路由模式 实现页面内嵌

abstract路由模式abstract是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面
j_bleach·2020-12-13 22:29

vue 基于abstract 路由模式 实现页面内嵌

abstract路由模式abstract是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面
j_bleach·2020-12-13 21:40

vue路由自动生成插件（含vue-router3和vue-router4写法）

前言好久没冒泡了，之前被上一家公司加班加到厌恶代码了，现在有空就来继续为插件库添砖加瓦。插件说明本插件用于vue-cli脚手架中的路由自动生成，免除手写路由导致的漏写或没有及时同步修改问题。插件安装yarnaddpikaz-vue-auto-routernpmi-Spikaz-vue-auto-router示例项目结构├─public└─src└─views├─home└─index.vue└─s
pikaz·2020-12-09 22:20

vue history模式刷新页面进入404解决方案

vue的路由模式严格意义上来讲有三种，但是常见的hash模式和history模式1，默认的路由模式2，hash模式，就是连接后边会跟#号3，history模式history模式的详细配置请移步官方文档vue
郝峰Vip·2020-12-02 21:06

import vue from vue_VUE路由拦截：Vue自定义全局弹窗组件

点击右上方红色按钮关注“web秀”，让你真正秀起来前言在任何一个平台中，如果需要增加用户黏度，除了用户需要的基本内容外，用户登录注册提交信息也是非常重要的一环，可以了解用户基本信息，用户喜欢等。抛出前后端混合开发外，vue可以轻松的实现路由拦截。VueRouter对路由集中统一管理，所以我们可以在main.js中添加如下代码，对所有路由进行拦截：router.beforeEach((to,from
weixin_39740419·2020-11-21 01:01

针对Vue路由history模式下Nginx后台配置操作

前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下location/{roothtml;indexindex.htmlindex.htm;try_files$uri$uri
·2020-11-17 17:56

Vue路由使用过渡动画后切换时出现抖动

问题描述为了让项目在页面切换时不那么死板，我是用了transition组件并加入淡出淡出效果，然而切换页面我发现居然每次跳一下。问题原因其实就是上个路由的占位导致，百度后说隐藏消失的页面让其不占位。解决方案fade-leave-to路由添加display:none;来源资料https://www.jb51.net/article/177825.htm
玲曦·2020-11-07 21:49

vue笔记-19（vue路由参数和嵌套路由）

路由规则中定义参数使用查询参数则不需要修改path,调用方式，在组件模板中使用this.$route.query.id获取使用路径变量传参，需要修改path,如”/login/:id“。调用方式，使用this.$route.params.id代码demo02vue-router路由参数.router-link-active{color:red;background-color:green;font
7ColorLotus·2020-10-14 11:18

Vue路由传参

Vue路由传参对路由传参的总结，不对之处望包涵，指正。记录Vue路由传参的两种方式query和params路由传参之-------this.$route.query路由传参querythis.
BaiLinfeng·2020-10-11 16:16

Vue路由传参

Vue路由传参对路由传参的总结，不对之处望包涵，指正。记录Vue路由传参的两种方式query和params路由传参之-------this.$route.query路由传参querythis.
BaiLinfeng·2020-10-11 16:06

web前端-一些问得少但是可以马上鉴定水平的问题

你说下你的项目目录是怎么样的vue路由的钩子函数（beforeEach，afterEach）的应用场景有哪些？你觉得前端路由的核心是什么？
刘叶青·2020-10-11 15:46

Vue路由History模式分析

Vue路由History模式分析Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用
WindrunnerMax·2020-10-10 18:00

vue -- 路由安装 入门使用

vue路由改写进阶–前置守卫验证是否登录安装路由cnpminstall--savevue-router配置路由创建src/router/index.js目录，输入以下代码importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom
程序员小哲·2020-10-10 13:48

Vue常见问题——Vue路由跳转、切换、返回页面不刷新问题

前言最近用iview-admin做后台管理系统，遇到了个问题，列表页面点击进入详情页面编辑，编辑完成自动跳转到列表页，需要页面重新刷新请求列表（后管就是这么简单粗暴），然并卵~，再次回到列表页页面不会重新刷新；问题很好解决，因为iview-admin的路由设置会默认缓存页面notCache:false,因此我直接设置notCache:true就ok了，页面可以重新刷新。但是我觉得这个问题简单也不简
ZD717822023·2020-10-09 13:26
上一页 16 17 18 19 20 21 22 23 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他