分类：Vue-Router

2021
09-10

详解Vue-Router的安装与使用

目录安装路由的基础配置将Router安装到Vue中Router的相关配置Router.routes的相关配置实现一个简单的路由1.配置路由2.在组件中实现路由1.router-link用于实现路由的跳转组件:该组件支持的属性2.router-view根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件安装1.在已有Vue项目中手动安装vue-routernpminstall--savevue-router2.使用vue-cli创建自带vue-router的新项目空格选择/取消a全选i反选v... 继续阅读 >
2021
09-10

vue3使用vue-router的完整步骤记录

vue3使用vue-router的完整步骤记录 前言对于大多数单页应用程序而言，管理路由是一项必不可少的功能。随着新版本的VueRouter处于Alpha阶段，我们已经可以开始查看下一个版本的Vue中它是如何工作的。Vue3中的许多更改都会稍微改变我们访问插件和库的方式，其中包括VueRouter。一、第一步：安装vue-routernpminstallvue-router@4.0.0-beta.13二、第二步：main.js先来对比一下vue2和vue3中main.js的区别：（第一张为vue2，第二张为vue3）可以明显看到，我们在vue2... 继续阅读 >
2021
08-20

vue-router history模式服务器端配置过程记录

history路由history模式是指使用HTML5的historyAPI实现客户端路由的模式，它的典型表现就是去除了hash模式中url路径中的#。在使用Vue-Router时开启history模式非常容易，只需要在实例化路由时传入mode:'history'配置项即可，但缺少服务端支持时，基于historyAPI的路由无法从url地址栏直接访问指定页面，这个很容易理解，因为url地址栏里输入后回车相当于发送了一次GET请求，那么不带#的路由路径就和普通的API接口是一样的，既然服... 继续阅读 >
2021
06-19

从vue-router看前端路由的两种实现

随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高，单页应用（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：利用URL中的hash（“#”）利用Historyinterface在HTML5中新增的方法vue-router是Vue... 继续阅读 >
2021
05-25

Vue路由vue-router详细讲解指南

中文文档：https://router.vuejs.org/zh/VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）：route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；routes：它是个复数，表示多个的集合才能为复... 继续阅读 >
2021
03-05

Vue-router路由该如何使用

一、说明VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vuejs过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSSclass的链接HTML5历史模式或hash模式，在IE9中自动降级自定义的滚动行为二、安装基于第一个vue-cli进行测试学习；先查看nodemodules中是否... 继续阅读 >
2020
12-16

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

Vue-router中hash模式与history模式的区别详解 VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，这个题其实就是考验你的开发经验是否属实。小白回答：hash模式url带#号，history模式不带#号。大牛解答：形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；功能上：比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或... 继续阅读 >
2020
10-10

区分vue-router的hash和history模式

一、概念为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于：改变视图的同时不会向后端发出请求。为了达到这种目的，浏览器当前提供了以下两种支持：1.hash——即地址栏URL中的#符号（此hash不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello，hash的值为#/hello。它的特点在于：hash虽然出现在URL中，但不会... 继续阅读 >
2020
10-10

vue-router 控制路由权限的实现

注意：vue-router是无法完全控制前端路由权限。1、实现思路使用vue-router实例函数addRoutes动态添加路由规则，不多废话直接上思维导图:2、实现步骤2.1、路由匹配判断//src/router.jsimportVuefrom'vue';importStorefrom'@/store';importRouterfrom'vue-router';importCookiefrom'js-cookie';constrouters=newRouter({base:"/test",//定义默认路由比如登录、404、401等routes:[{path:"/404",... 继续阅读 >
2020
10-10

vue-router 按需加载 component: () => import() 报错的解决

vue-router 按需加载 component: () => import() 报错的解决 vue的单页面（SPA）项目,必然涉及路由按需的问题。以前我们是这么做的//require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件constLogin=r=>require.ensure([],()=>r(require('../component/Login.vue')));但现在vue-router的官网看看，推荐这种方式：//vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载constApp=()=>import('../component/Login.vue');可是，很多情况下，我们这么... 继续阅读 >
2020
10-09

vue-router 2.0 跳转之router.push()用法说明

vue-router 2.0 跳转之router.push()用法说明 router.push(location)除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。router.push(location)想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。当你点击<router-link>时，这个方法会在内部调用，所以说，点击等同于调用router.push(…)。声明式：<router-link:to="...">编程式... 继续阅读 >
2020
10-09

解决Vue-Router升级导致的Uncaught (in promise)问题

解决Vue-Router升级导致的Uncaught (in promise)问题 在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught(inpromise)的问题这是什么原因呢？看vue-router的版本更新日志V3.1.0版本里面新增功能：push和replace方法会返回一个promise,你可能在控制台看到未捕获的异常解决方法一：在调用方法的时候用catch捕获异常this.$router.replace({name:'foo'}).catch(err=>{console.log('allgood')})方法二：对Router原型链上的push、replace方法进行重写... 继续阅读 >
2020
10-09

vue-router重写push方法,解决相同路径跳转报错问题

修改vue-router的配置文件，默认位置router/index.jsimportVuefrom'vue'importRouterfrom'vue-router'/***重写路由的push方法*解决，相同路由跳转时，报错*添加，相同路由跳转时，触发watch(针对el-menu，仅限string方式传参，形如"view?id=5")*///保存原来的push函数constrouterPush=Router.prototype.push//重写push函数Router.prototype.push=functionpush(location){//这个if语句在跳转相同... 继续阅读 >
2020
10-08

解决vue-router 切换tab标签关闭时缓存问题

解决vue-router 切换tab标签关闭时缓存问题 在router入口页面加上keepAlive:true//需要被缓存false则不需要{path:'fundProListG',component:resolve=>require(['@/pages/product/fundPros/fundTab/fundTab.vue'],resolve),title:'基金首页',redirect:'fundProListG/fundProListG',meta:{keepAlive:false//不需要被缓存},children:[{path:'fundProListG',component:resolve=>require(['@/pages/product/fundPros/fundProListG.vue'... 继续阅读 >