VUE路由

10 Vue路由、http请求、跨域请求fetch/axios/proxy

1、Vue路由的使用->页面之间跳转其不会刷新页面->单页面应用->用户体验感良好(1).安装路由模块：npminstallvue-router--save-dev；然后重启->npmrunserve;
官清岁月·2020-02-02 08:11

vue路由的两种模式，hash与history

对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于———改变视图的同时不会向后端发出请求。一、为了达到这个目的，浏览器提供了以下两种支持：1、hash——即地址栏URL中的#符号（此hsah不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello,hash的值为#
木偶之春hyc·2020-02-02 04:52

Vue路由的单页面应用

VueJs路由的简单单页面应用：1.路由的认识：传统的页面跳转是用超链接a来实现的，路由功能与它类似。路由将路径和组件映射起来来实现设定访问路径，适用于单页面应用。2.在刚开始引用的时候就出现问题：各种类似的“componentofundefined,Vueisnotdefined,VueRouterisnotdefined”报错。通过仔细的查找和试验，证实是版本的问题，解决办法：下载对应的环境和
古时候·2020-02-02 03:05

vue路由使用

vueaddrouter使用历史模式吗？Y项目中生成router.js文件，所以在main.js主入口文件中引入importrouterfrom'./router.js'在newVue({router:router})中使用routes:[]中component:()=>import('./views/Home.vue');懒加载routes:[]中redirect:()=>{console.lo
hijackli·2020-02-01 22:23

VUE 改成history 模式 刷新404 的问题

vue路由的URL有两种模式，一种是hash，一种是history，history模式更好看一些。在使用hisory模式时，由于地址并不是真实存在，那么在刷新的情况下，这个会报404错误。
自由港·2020-01-21 16:00

Nginx: Vue路由history模式下，publicPath配置为子目录时，页面刷新报404错误

今天在部署项目时遇到的问题，在网上都找不到解决方法（或许自己没找对），所以自己捣鼓了下，测试加分析定位bug，最后总算解决了，所以要记录一下。1.问题描述vue项目打包后部署到Nginx，Nginx作为静态服务器项目路由启用HTML5的history模式项目路径：html/some/path（Nginx的HTML目录）publicPath：配置为/some/path/（vue.config.js中
H有个U啊~·2020-01-14 18:08

Vue路由守卫

我们在看一些网页的时候如果想进一步了解一些东西的详情信息的话,当前的网页就会让我们进行登录,我们必须及逆行登录后才能够看到我们想看到的详情信息,这个操作我们称之为路由守卫也是我们在做一些项目的时候必要进行的一步,如果我们不做这一步的话,自己所作项目中的所有的数据,不管是可以公共访问的还是不能进行公共访问的都会展现给用户,这样是存在一定性的危险的,会极可能的导致自己公司的一些重要数据的丢失或者被盗用
小小熊猫·2020-01-12 16:00

vue路由

vue路由在项目目录下的router/index.js下配置当我们创建了一个vue页面，需要将它注册进路由里面才能使用如图我想实现从Test页面转向A，B页面，我就要使用标签实现页面的跳转，还要将两个页面注册进路由里面子路由
刘牌·2020-01-10 02:51

vue移动端项目架构设计（附demo）

项目初始化技术选型结合vue生态，此移动端项目模板使用如下技术：前端框架——vuevue状态管理——vuexvue路由管理——vue-router请求方式——axios样式管理——less包管理——npm
LM林慕·2020-01-10 01:54

2019-06-18 vue路由

本文转载于前端工匠。如有侵权联系本人立刻删除一、首先带着问题要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-route
qiaoguoxing·2020-01-07 17:46

vue路由的两种模式以及history模式下后端配置

原文链接：https://www.cnblogs.com/mica/p/10876822.html1、hash——即地址栏URL中的#符号。hash虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。2、history——利用了HTML5HistoryInterface中新增的pushState()和replaceState()方法。需要特定浏览器
LeslieLiang·2020-01-07 09:59

iOS微信 Vue “复制链接”问题

因为ios微信对vue路由中的#号识别问题。我的解决办法是在初始进入项目时重新拼接项目地址，再重定向到拼接的地址去。
XLsn0w·2020-01-05 11:55

vue路由传参

方案一：直接调用$router.push实现携带参数的跳转this.$router.push({path:`/describe/${id}`,})路由配置：{path:'/describe/:id',name:'Describe',component:Describe}子组件获取参数：$route.params.id方案二：通过路由属性中的name来确定匹配的路由，通过params来传递参数thi
王哈哈wl·2020-01-04 16:14

第九课 vue路由跳转加入过渡动画

第一步：给router-view显示外层加入一个transition标签第二步：制定他的css懂法方案，name="fade"在加入css代码：如何配合animate.css使用1.下载css文件2.放在项目的static文件夹中3.在index.html中，用link引入，引入路径为"/static/animate.css"4.在hi组件中写入样式当然也可以在修改一下过渡的细节1.加入一个cla
面包在奔跑·2020-01-04 06:47

Vue路由

前言本文基于Vue2.0的简单路由的应用，更多路由详情请进入官网简单路由基本使用路由的简单方式官网中的栗子写的挺清楚，这里把官网中的重点提取过来吧！下载路由GotoFoo//1.定义组件。constFoo={template:'foo'}constBar={template:'bar'}//2.定义路由constroutes=[{path:'*',redirect:'/foo'},//重定向{pa
yimi珊·2020-01-02 13:33

vue项目创建步骤 和 路由router知识点

菜单快捷导航：vue项目创建vue路由router知识点(路径参数、查询参数、命名路由、嵌套路由、命名视图、hash/history模式)vue导航守卫（全局守卫、单个路由独享、组件级守卫）1、创建一个
TDX·2020-01-01 23:00

vue项目创建步骤 和 路由router知识点

菜单快捷导航：vue项目创建vue路由router知识点(路径参数、查询参数、命名路由、嵌套路由、命名视图、hash/history模式)vue导航守卫（全局守卫、单个路由独享、组件级守卫）1、创建一个
TDX·2020-01-01 23:00

与传统方式不一样的vue路由

前言以前我们用的路由都是以抛锚形式的，想不到现在可以做成像伪静态一样的路由。示例对比传统形式(hash式)的路由:http://www.example.com/app#indexhttp://www.example.com/app#uservue式(URL式)路由:http://www.example.com/app/indexhttp://www.example.com/app/user这里要注
爱蛇·2020-01-01 04:32

Vue路由-动态路由-编程式导航

 通常我们会用一个或多个路由表，来匹配所有页面的路径。但这不能满足一些特定的需求。#解惑 好几次被问到怎么区分$route和$router，这里统一给出解释：this.$router：指的是router实例，也就是newVueRouter()的执行结果，使用效果与router相同。有这种写法是因为Vue并不想在每个独立需要封装路由的组件中都导入路由，因此在全局创建了该对象。this.$route：
果汁凉茶丶·2020-01-01 01:21

Vue路由默认子路由

在vue路由中，如果存在二级路由的话，那么该路由下的所有子路由默认都不会自己显示的，如果想要默认展示子路由的话就需要按照如下配置routes:[{path:'/system-settings',component
LeslieLiang·2019-12-31 22:25

vue 使用脚手架创建项目

webpack的Projectname（工程名）:回车Projectdescription（工程介绍）：回车Author：作者名Vuebuild（是否安装编译器）:回车Installvue-router（是否安装Vue
逆世界开发者·2019-12-30 00:57

vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下：方法一：params传参：this.$router.push({name:"admin",//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)params:{id:item.id}})//这
有梦想的咸鱼前端·2019-12-29 00:50

vue路由传参

路由基础知识router和route的区别route，是一个路由。{path:'/a',component:A}routes，是一组路由。constroutes=[{path:'/a',component:A},{path:'/b',component:B}]router，是一个管理者，它管理了一组route。constrouter=newVueRouter({routes//routes:rou
lesdom·2019-12-27 23:24

vue路由

路由路由：vue-routervue的核心插件vue-router.js根据不同的url访问不同的页面创建单页面SPA(SINGLEPAGEAPPLICATION)应用例子1步骤：1.创建链接2.创建组件3.配置路由4.创建路由实例5.路由实例挂载到vue实例上首页用户页//2.创建组件varHome={template:`这是首页`}varUser={template:`这是用户页`}//3.配
婲魢銣佌亾荷姒堪·2019-12-27 09:11

vue 路由懒加载三种方式

vue路由懒加载三种方式方法一：结合Vue异步组件与webpack代码constindex=r=>require.ensure([],()=>r(require('@/page/index')),'index
diuren1205·2019-12-27 07:12

vue路由传参

转自：https://blog.csdn.net/wy01272454/article/details/77869442?locationNum=7&fps=1传参方式通过router-link进行跳转通过编程导航进行路由跳转动态路由一、router-link方式1.path->是要跳转的路由路径,也可以是路由文件里面配置的name值,两者都可以进行路由导航2.params->是要传送的参数,参数
胡儒清_前端那个老胡·2019-12-26 16:26

vue路由mode模式：history与hash的区别

引言对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持：1.hash(默认)——即地址栏URL中的#符号（此hash不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello，has
帅哥哥写代码·2019-12-25 10:46

vue+element+axios请求拦截和全局守卫

在我们第一次登录成功的时候，我们在可以在自己的本地存储一个数据admin-key，使用localstorage或者cookie都可以，然后我们在vue路由全局守卫中
候鸟与暖风·2019-12-24 15:49

14.Vue路由参数传递以及重定向

1.使用场景我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了；2.使用流程修改父组件，绑定的子组件路由名称以及传递的参数修改路由配置文件子组件的路径中添加参数，以及修改名称修改子组件内容用于展示3.路由参数传递的两种方式注：不要在中直接添加获得参数，需要在外层加标签包含起来1.占位
海恋天·2019-12-23 14:00

13.Vue路由嵌套

1.什么是路由嵌套嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：/user/foo/profile/user/foo/posts+------------------++-----------------+|User||User||+--------------+||+-------------+|||Profil
海恋天·2019-12-23 13:00

vue路由的过渡动画

1.想让路由有过渡动画，需要在标签的外部添加标签，标签还需要一个name属性。css过渡类名：组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：1.fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除2.fade-enter-active:进入过渡的结束状态，元素被插入时就
小白白呐·2019-12-23 00:29

vue-router解析

一个vue路由的工作流程1、前端路由和后端路由的区别后端路由输入url->请求发送到服务器->服务器解析请求的路径->拿取对应页面->返回出去前端路由输入url->js解析地址->找到对应地址的页面->
洁本佳人·2019-12-22 21:51

vue路由传参

路由的传参：1，查询字符串：路径?uname=jack&upwd=123接收：{{$route.query}}2，rest风格传参路径/rose/456在组件里面一一对应接收：{{$route.params}}路由传参：Document首页用户页//2varHome={template:`我是首页`}varUser={template:`我是用户页注册登录`}varRegist={template
张鑫冲·2019-12-22 01:47

Vue2从0到1(二)：Vue-router的使用

上一篇讲了Vue起步：环境的搭建用webpack打包vue下面讲一下vue路由vue-router8.使用路由vue-router2首先安装vue-router:npminstallvue-router
t现在是冬天t·2019-12-21 09:28

vue路由进阶

一..全局路由前置守卫1.首先看一下文档结构Dashboard和Login是一级页面homeaboutmine是在Dashboard下的二级页面2.router.js代码如下importVuefrom'vue'importRouterfrom'vue-router'//一级界面importLoginfrom'./views/Login'importDashBoardfrom'./views/Das
程小杰呀·2019-12-20 15:00

vue路由基础总结

1.创建项目为了练习路由这里没有选择路由就选了Bable自己一步一步的配置加深印象。然后下载路由npminstallvue-router--save2.基础配置src文件下新建一个router.js管理所有的路由//1.引入vueimportVuefrom'vue'//引入路由importRouterfrom'vue-router'//使用路由Vue.use(Router);//创建一个实例输出它
程小杰呀·2019-12-20 09:00

vue路由跳转传参的两种方法

路由跳转：this.$router.push({name:'工单列表',params:{p_camera_dev_name:'xxx'}});使二级菜单呈点击状态：$('[index*=\'/demo/test\']').trigger('click');获取参数：varthiz=this;if(thiz.$route.params.p_camera_dev_name!=undefined){//
你振哥，cmz·2019-12-19 22:00

Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

目录Vue组件文件微微细剖Vue组件生命周期钩子Vue路由1.touter下的index.js2.路由重定向3.路由传参数补充:全局样式导入路由跳转1.router-view标签2.router-link
LD_Dragon_sky·2019-12-19 22:00

各种比较好的网址

弹性盒布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmljs小练习：http://www.fgm.cc/learn/vue路由官网：https
郭月帅·2019-12-18 09:54

Vue路由全解

路由基础router-link//包装的a标签,router-link组件//to属性router-view//router-view组件视图渲染router.js//router.js//配置路由列表importHomefrom'./views/Home.vue'exportdefault[{path:'/',//url路径component:Home//路径对应渲染组件},{path:'/ab
YM雨蒙·2019-12-17 14:49

#前端开发工程师

Vue.js路由@(示例)[帮助]简介HTML代码Vue路由进入跳转js代码constUser={template:`{{$route.params.id}}欢迎进入Vue路由`}constroutes
指尖核心·2019-12-17 13:09

Vue路由开启keep-alive时的注意点

这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。HTML部分：JavaScript部分：.....created:funct
烈风裘·2019-12-15 20:01

搭建Vue的常用插件

npminstallvue-g安装Vuenpminstallvue-router-g安装vue路由npminstallvue-cli--g安装Vue脚手架(已内置webpack，不需额外再安装)npminstallqs
小丶枫·2019-12-15 12:32

Vue学习日记（三）——Vue路由管理vue-router

前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+webpack构建初始项目，在vue官网里面也有相关介绍，在这里我就手把手教大家一下吧，先通过控制台进入相关的文件目录下，然后输入#后面是注释#$表示当前文
龙象般若功·2019-12-13 20:00

Vue路由指向同一组件时页面不刷新问题

问题：当使用动态路由或路由传参时，路由改变但是页面不刷新解决方法一二解决方法一使用watch监听路由变化。手动更新数据。二使用使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。如果想强制刷新，可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一
周磊磊要加油·2019-12-13 11:45

vue路由参数变更刷新当前页面

通过this.$router.replace改变当前页面路由地址（单纯改变页面地址页面是不刷新的）结合this.reload()刷新当前页面通过this.$route.query.cart_ids获取当前路由参数取出接口内需要去除的参数路由参数过滤掉去除参数赋值（为了方便过滤我把字符串转成了数组split，数组过滤数组，过滤完记得转回字符串join）this.$router.replace({na
脱发少女·2019-12-13 06:21

vue路由按需加载(路由懒加载)的3种方式

1.vue异步组件vue异步组件技术====异步加载vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.但是,这种情况下一个组件生成一个js文件/*vue异步组件技术*/{path:'/home',name:'home',component:resolve=>require(['@/components/home'],resolve)},{path:'/index',name
MiemieWan·2019-12-12 17:21

vue路由传参方式、区别

vue路由传参比如有A、B两个文件，A文件的数据要往B文件传递，这个时候就需要路由传参。
chasing_dream·2019-12-12 03:07

VUE路由报错 Cannot read property '$createElement' of undefined

VUE路由报错Cannotreadproperty'$createElement'ofundefined/*newVue({el:'#app',//用了路由后就先不用这种方式用.
刘小钢·2019-12-11 21:46

vue路由传参三种基本方式详解

这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数
哒哒Da·2019-12-09 09:19
上一页 31 32 33 34 35 36 37 38 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他