vue路由

vue路由之进阶篇

一.路由组件传参router.js代码片段：{path:'/argu/:name',name:'argu',//传入不同的参数可以进入同一个页面，实现组件的复用component:()=>import('@/views/argu.vue'),props:true},组件内获取路由参数的代码片段{{name}}exportdefault{props:{name:{type:String,//type
ade梦里不知身是客·2020-06-25 08:16

vue全家桶项目搭建之五——vue 中路由vue-router配置方法以及vue-router路由的跳转方法以及参数的传递和接收

目录一、安装vue-router二、配置vue-router1.src文件下新建文件夹router与store平级，并配置路由2.在main.js中配置三.vue路由带参数跳转方式以及参数的接收方式1.
傻小胖·2020-06-25 08:15

vue路由切换动画，前进左滑，后退右滑

一、目标实现原生app页面切换动画。前进左滑后退右滑，同级tab切换无动画二、分析1、如何判断页面是前进还是后退？2、如何在前进后退时使用不同的动画？三、思路1、为每个页面定义一个变量来表示当前所在的层级（比如：A->B->C，A的层级为1，B的层级为2，C的层级为3）2、在页面每次切换时判断当前显示的页面和即将显示的页面的层级关系，即可知道是前进还是后退(例如:A->B，判断A页面与B页面层级关
CalmHarbin·2020-06-25 06:07

vue学习 十七 Vue路由和http请求

路由的实现：首先需要cmd将路由模块装上，然后重启项目，多打几遍就熟悉了npmrundev，在下面的黑窗口中，我之前已经装过了路由模块，显示如下npminstallvue-router--save-devnpmrundev然后你需要的就是在main.js文件中引入路由模板，然后使用它，如下图中第一和第二个画圈的部分配置路由什么的参照mode：“history”，的作用是为了去除地址栏中的/#/这个
liusongjing·2020-06-24 14:37

vue-router vue路由中的问题（坑）

Errorinrenderfunction:"TypeError:Cannotreadproperty'matched'ofundefined"webpack4.0.1中，也存在以下问题（注意点）：1、VueRouter实例化时的参数，可以简写为routes，表示routes:routes。但是要注意的是，“routes:routes”表示属性名是routes，值是routes。在这种情况下（属性
田江·2020-06-23 21:38

vue路由按需加载（路由懒加载）

vue的SPA（SinglePageApplication）应用里，当（webpack）打包构建时，会把所有的js打在一起，JavaScript包会变得非常大，并在第一次请求时全部下载完毕，影响页面加载（性能）。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。目前有三种方式实现路由组件的懒加载，分别是：vue异步组件es的import()w
田江·2020-06-23 21:07

vue路由自动生成

在写vue项目时，遇到页面跳转很多，需要配置很多路由，一个一个路由配置的话非常麻烦，修改起来也不方便。如下所示：exportdefaultnewRouter({routes:[{path:'/',name:'home',component:require('@/pages/home.vue')},{path:'/demo1',name:'demo1',component:require('@/pa
OSError·2020-06-23 20:50

.Vue路由(路由配置、传参、获取参数)

this.$route和this.$router区别：this.$route信息参数（query、prams）传参获取this.$router功能函数，go()，push()等方法调用1.导入和使用路由(main.js)：importRouterfrom'vue-router'//使用路由Vue.use(Router)//导入vue页面importRouterAfrom'../page/route
尘埃338·2020-06-23 14:55

学习vue路由（详解）

好久没更新了，因为最近在做微信小程序的项目。没时间更新，今天抽出时间来说说vue的路由。正题：最简单的路由（非vue-cli）：1.需要在新建的html文件里引入routes.js文件2.HTML代码：首页详情我的我的//输出js代码：//1创建组件varHome={template:'我是首页'}varList={template:'我是列表页'}varDelit={template:'我是列表
heshuaicsdn·2020-06-23 14:27

关于vue路由二次跳转问题的记录

一、问题描述今天在写自己的小项目的时候遇到一个问题，点击路由跳转的时候会有两次跳转，一次是正常跳转，一次是从根路由跳转到目标路由。代码如下：路由跳转代码：this.$router.push({name:"address",params:{checkedList:this.checkedList,unCheckedList:this.unCheckedList,totalPrice:this.tot
guxin_duyin·2020-06-23 11:36

vue路由参数发生变化，但是页面不刷新的问题（vue监听路由参数变化重新渲染页面）

例：地址1："https://xxx/#/autoPage?channelCode=xuezhiyuan_jc111"地址2："https://xxx/#/autoPage?channelCode=xuezhiyuan_jc222"问题现象：当从第一个调到第二个地址时，页面内容不进行刷新，依然停留在地址1的内容，但是地址栏会变化为地址二。解决方式：vue的keyhttps://cn.vuejs.o
KeroroLX·2020-06-23 10:03

vue部署到nginx的location配置（可以在不同路径刷新404）

官网：https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子我项目中设置vue路由为history模式，项目就会少了地址栏的
不屑哥·2020-06-23 09:24

路由原理解析：vue-router 组件的 scrollBehavior解决问题:页面的滚动会影响到其他页面

vue路由跳转就是通过对history.pushState()和history.replaceState()方法的模拟来实现，会往history栈中存放一条记录，这也是为什么vue的router.push
宝儿的程序生涯·2020-06-23 07:53

vue 路由懒加载

vue路由懒加载importVuefrom'vue'importRouterfrom'vue-router'/*importShowMainfrom'..
九宝妈咪·2020-06-23 06:00

vue路由登录拦截(vue router登录权限控制)

实现原理：哪些路由需要验证需要在路由文件router/index.js中指定：{path:'/',component:Home,name:'Home',iconCls:'fafa-address-card',leaf:true,//只有一个节点children:[{path:'/chart',component:Chart,name:'Chart',iconCls:'el-icon-s-flag'
duansamve·2020-06-23 05:10

vue路由学习-路由是什么

有关vue路由的学习过程开发工具：vscode事先准备：利用脚手架构建模板实例，具体构建过程可参考官方文档https://cli.vuejs.org/zh/.
doitba·2020-06-23 05:14

vue动态路由配置，vue路由传参

动态路由：当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据这就要用到动态路由跟路由传参了！首先我们来了解下router-link这个组件：简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端
diego1993·2020-06-23 04:37

前端开发：vue路由之前端路由的原理

现在mvvm框架已经火的不成样了，React、Angular和Vue.js的发布让前端工程化成为主流，大前端时代已经到来了，最近接触了vue的前端路由，闲来无事就开始琢磨源码，下面来说说前端路由的原理。一.前端路由现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚
cuandugen9315·2020-06-23 01:12

Vue路由重定向

路由对象$router路由跳转方法：push()语法：$router.push('url')分写与合写方式的重定向写法不一样分写形式的路由中：可以找到自己创建的路由对象，加上myrouter.push('想要重定向的path')可以在vue实例中添加钩子函数：beforeCreate:function(){this.$router.push('想要重定向的path')}合写形式的路由中：我们再实例
xlayzheng·2020-06-23 01:31

vue路由传参的三种基本方式

一、技术概述这个技术算是比较基础的，不会很难，但是基本每个项目都要用到，所以写下这篇博客。主要的运用场景：点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。二、技术详述父组件(template部分)：{{invitation.title}}方式一父组件(js部分)methods:{getDetail(id){//直接调用$router.push实现携带参数的跳转this.$rou
陈朝帏·2020-06-22 23:00

将 vue 路由拆分到多个文件( vue-router 目录结构)

所以，想把vue路由也按功能，类似laralel一样，划分为多个路由文件，最终的路由结构类似下面：routes/index.jsaccount.jsstudent.jsbusiness.js...也可以是更深层次的嵌套
beyond__devil·2020-06-22 17:55

vue路由跳转的方式

vue路由跳转有四种方式1.router-link2.this.$router.push()(函数里面调用)3.this.$router.replace()(用法同push)4.this.
bagu1904·2020-06-22 16:10

vue路由守卫实现登录状态管理

有了这段代码，再也不用担心每进入一个页面发送一次checkLogin请求验证了过多的名词等下次再来解释看下面两部分：1、路由文件//登陆页面不需要检测状态，所以不需要守卫//login{path:'/login',name:'login',component:Login,meta:{title:'登录'}},//home页面需要进行登陆状态验证，所以增加路由元信息，mate里面设置要不要守卫//h
栈木地·2020-06-22 13:10

vue路由和嵌套方法

学习vue路由和vuex有一周时间了今天把学会的方法总结一下，我是用npm搭建的开发环境在npm安装vue的时候会提示你是否安装路由，如果没有就安装一个：npminstallvue-router--save
故事迷人眼·2020-06-22 11:08

vue路由系统mode的hash和history的区别及用法

环境：vue2一：vue路由为了构建单页面应用，vue引入了路由系统；前端路由的核心--改变视图的同时，不向后端发送请求；vue的路由有两种模式--hash和history，默认是采用hash的。
注释科长·2020-06-22 10:19

vue路由权限校验功能的实现代码

引言做后台系统的时候，难免会有用户权限的判断。admin可以查看全部菜单，user只能查看部分菜单。一开始接触这个需求的时候，完全是纯前端做的。在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据{path:'/router',name:'router',meta:{title:'标题',roles:['admin','user']
·2020-06-22 08:27

Vue路由的模块自动化与统一加载实现

首先呢，我们来看看一般项目路由是怎么划分的。为什么这么划分呢？如果大项目业务非常多，单纯的单页面很难维护，我们只有这样规范化，才能高效率。模块自动化与统一加载的好处：规范化命名（模块名.业务名.vue）不用每次写页面都要去总路由引入组件接下来，我们实战一波。一、建立项目文件目录以及文件夹根据上面的要求建立，依次在src文件夹下的components文件夹下建立一个如名叫model1文件夹用于存放功
·2020-06-22 08:11

VueRouter路由(Vue全家桶之一详解)

Vue路由初识两种模式：hash模式或HTML5历史模式vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。
宅男呀·2020-06-22 05:59

vue - 学习笔记

vue-学习笔记1.初始化以及配置说明1.1初始化1.2配置2.如何引入其他库并使用2.1bootstrap3.路由3.1vue路由的简单实践3.2保持路由组件渲染后的数据，避免切换后重置3.3路由统一个路由组件渲染后不会再次执行
Prometheus_xiao·2020-06-22 03:01

vue-----路由

使用vue-cli安装不需要另外安装路由，只需要在安装时候选择Manuallyselectfeatures，然后选到router按下空格就行vue路由分为前端路由和后端路由路由配置RouterViews
怦然心动````·2020-06-21 23:44

vue路由---导航守卫

导航守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局前置守卫beforeEach当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。你可以使用router.beforeEach注册一个全局前置守卫：//模拟登录状态letlogin
怦然心动````·2020-06-21 23:44

简单的Vue.js路由配置步骤

vue路由：可以动态的往根组件里挂载组件在学习vue路由时，记录一下vue的路由配置过程：1.安装npminstallvue-router--save/cnpminstallvue-router--save2
旭氏美术馆·2020-06-21 18:54

vue面试题之二：路由 vue-router 面试题

2.vue路由面试题1.mvvm框架是什么？
Arthas云皓·2020-06-21 17:09

四、vue学习之路由

vue路由constLogin={template:'我是登录'};constRegister={template:'我是注册'};constroutes=[{path:'/login',component
一个名字很长很长很长的JAVA工程师·2020-06-21 14:08

Vue学习官网和Vue的书籍 目录结构

Vue基础知识学习网站【中文】https://cn.vuejs.org/v2/guide/Vue路由知识学习网站【中文】https://router.vuejs.org/zh/guide/Vuex更为复杂的
weixin_34221073·2020-06-21 11:04

VUE路由 （1.router与route区别 2.路由跳转传参 ）

路由的基本使用可参考Vue路由使用总结1.router与route的区别1.router是VueRouter的一个对象，一个全局对象，通过router实现页面跳转，向后回退，向前等操作。
疯狂吸猫·2020-06-21 09:59

Vue路由的模块自动化与统一加载

首先呢，我们来看看一般项目路由是怎么划分的。为什么这么划分呢？如果大项目业务非常多，单纯的单页面很难维护，我们只有这样规范化，才能高效率。模块自动化与统一加载的好处：规范化命名（模块名.业务名.vue）不用每次写页面都要去总路由引入组件接下来，我们实战一波。一、建立项目文件目录以及文件夹根据上面的要求建立，依次在src文件夹下的components文件夹下建立一个如名叫model1文件夹用于存放功
Vam的金豆之路·2020-06-21 05:20

ElementUI基本使用(一)

单选框vue路由跳转：日期做字段使用，指定format下拉选择框文件树状结构自定义树状结构删除数组对象中的一个元素splice单选框label值为string类型，后台传int需要处理男女vue路由跳转
陈不做·2020-06-21 04:19

Vue动态生成Router

Vue路由介绍VueRouter是Vue.js官方的路由管理器。
masgak·2020-06-20 22:33

vue路由

1、路由文件配置router文件夹下的index.js文件importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[{path:'/',redirect:'/home'},{path:'/home',name:'Home',props:{name:'xxx'},//路由隐式传参component:
double-shuang·2020-06-19 08:00

vue路由的实现原理

Vue的路由实现：hash模式和history模式hash模式：早期前端路由的实现是基于window.location.hash来实现的，window.location.hash的值就是URL中#后面的内容特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash模式下，仅hash符号之前的内容会被包含在请求中，如http://
紫诺花开·2020-06-16 10:00

vue-router的钩子函数

vue路由钩子大致可以分为三类:1.全局钩子主要包括beforeEach和aftrEach,beforeEach函数有三个参数：to:router即将进入的路由对象from:当前导航即将离开的路由next
裘马轻狂大帅·2020-06-10 12:05

vue路由权限校验

引言做后台系统的时候，难免会有用户权限的判断。admin可以查看全部菜单，user只能查看部分菜单。一开始接触这个需求的时候，完全是纯前端做的。在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据{path:'/router',name:'router',meta:{title:'标题',roles:['admin','user']
阿婧·2020-06-06 15:00

前端搬砖之回顾与总结：vue路由传参的方式

前言从17年毕业一直到现在都在前端搬砖，从小的外包公司到中大型的互联网公司都留下过搬砖的足迹。从业这三年，不管是jquery、react、vue、还是小程序啥的的项目都弄过，项目弄的虽然多了，但是却很杂，也没有一个一直维护并深入优化的项目。为了不让自己做过的项目随时间遗忘下去，特地将项目中遇到的问题或者知识记录在此，达到巩固的作用。如果其中有一些错误，也恳请发现问题的朋友可以在评论区留下您的建议。
_林冲·2020-06-02 23:00

第三十六节:Vue路由:Vue-router路由传参

前沿:vue-router的路由跳转时传递参数有两种方式,:一种是路由参数,通过定义动态路由传递参数另一种是通过query来传递参数,在者,我们已经学习过的,路由的跳转主要有两大类:一类是组件的to跳转第二类编程是导航,通过js命令进行跳转因此两种跳转方式,组合两种传参方式,就会组合出四种不同的写法1.动态路由传参动态路由传参就是通过params进行传参:动态路由传参说明:动态路由params参数
时光如剑·2020-06-02 19:03

Vue路由传参的两种方式

第一种：以?进行拼接要传递的参数GotoBar页面中获取值的方式：:this.$route.query.name第二种：按模式进行匹配参考官网即可模式：/foo/:name/:id，其中foo为路径名称,:name,：id为参数名称路径：/foo/zhangsan/4，其中zhangsan,4分别对应name和id的参数值页面获取值的方式this.$route.params.name代码示例.m-
Jure_joe·2020-05-28 15:32

vue路由懒加载及组件懒加载

一、为什么要使用路由懒加载为给客户更好的体验，首页组件加载速度更快一些，同时可以解决白屏问题。二、定义懒加载简单的说就是延迟加载或按需加载，即在需要的时候进行加载。三、使用常用的懒加载方式有两种：即使用vue异步组件和ES6中import1、未用懒加载，vue中路由代码如下importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldf
Echo坚决不玩蹦极·2020-05-26 18:04

vue路由---滚动行为

constrouter=newVueRouter({routes,mode:'history',scrollBehavior(to,from,savedPosition){if(savedPosition){returnsavedPosition}else{return{x:0,y:0}}}})
林良伟·2020-05-23 16:33

Vue 路由跳转的时候遇到一些图片CSS不加载 解决方案

Vue路由跳转的时候遇到一些图片CSS不加载解决方案思路分析：通常在我们写js的代码的时候都会加入window.onload()再onload函数中写代码，这样做的意义就是能够在文档加载完成之后才执行js
欢少的成长之路·2020-05-23 15:29

vue高频面试题

3，vue路由的实现原理般源码中，都会用到window.history和location.hashHashurl#后面的值不会发
你好顾碗秋·2020-05-17 21:56
上一页 29 30 31 32 33 34 35 36 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他