分类：Vue-router

2020
10-08

keep-Alive搭配vue-router实现缓存页面效果的示例代码

Vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现，keep-alive组件可以使被包含的组件保留状态，或避免重新渲染。在routes.js中定义路由，在路由中定义元信息(meta字段)，需要缓存的页面就需要在meta对象中定义一个字段，这里设置为keepAlive，设置为true，反之，则不缓存。{path:'/a',component:()=>import('@/pages/A'),meta:{title:'A',keepAlive:true}},{path:'/b',component:... 继续阅读 >
2020
09-29

详解vue-router的Import异步加载模块问题的解决方案

详解vue-router的Import异步加载模块问题的解决方案 1、问题现象2、出现问题的代码点3、替代方案：把import()替换成如下：Promise.resolve().then(()=>require(`@/views/${str}`))4、原因分析项目在编译时，出现一个警告这个警告的含义：require接收了一个变量，会报上面的警告，接收一个写死的字符串值时则没有警告！我们通过控制台查看到import()对应编译过后的代码：从上图可以看到require接收了一个变量，所以运行时出现了警告。那这样就会报上面找不到对应的模块。那我们再来看... 继续阅读 >
2020
09-27

Vue中通过vue-router实现命名视图的问题

在用vue-router路由处理一些需求的时候例如有时需要同时同级展示多个组件而不是嵌套展示例如：创建一个布局有侧导航和主内容两个视图此时命名视图就派上用场了在路由对象中使用components属性以使一个路径下可挂载多个子组件：之后即可为每个要展示的组件指定一个名字默认name为default即不设置名字<script>varheader={template:"<h1>头部</h1>"}varleftBox={template:"<h1>左侧边栏</h1>"}varmainBox={tem... 继续阅读 >
2020
09-25

Vue-router 报错NavigationDuplicated的解决方法

Vue-router 报错NavigationDuplicated的解决方法 版本：3.1.x报错原因：使用push()、replace()进行导航时，不能重复导航到当前路由。解决办法：方法1：在定义路由的文件中router/index.jsconstoriginalPush=VueRouter.prototype.pushVueRouter.prototype.push=functionpush(location){returnoriginalPush.call(this,location).catch(err=>err)}constoriginalReplace=VueRouter.prototype.replaceVueRouter.prototype.repalce=functionreplace(location){re... 继续阅读 >
2020
09-24

vue-router 路由传参用法实例分析

本文实例讲述了vue-router路由传参用法。分享给大家供大家参考，具体如下：在设置路由规则时，我们可以给路径名设置一个别名，方便进行路由跳转，而不需要去记住过长的全路径。例如：<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>routerTest1</title><c:importurl="importFile.jsp"></c:import></head><body><di... 继续阅读 >