vue-router | 易学教程

Vuejs route redirect on refresh

阅读更多关于 Vuejs route redirect on refresh

问题 When i use refresh button in my browser or hit f5 on keyboard instead of refreshing my page it redirects to home page. Code router.js import Vue from "vue"; import VueRouter from 'vue-router'; import store from './store'; Vue.use(VueRouter); import NotFoundComponent from './components/NotFoundComponent.vue'; const router = new VueRouter({ mode: "history", routes: [ { path: '*', name: 'notFound', component: NotFoundComponent, meta: { breadCrumb: 'Not Found' } }, //rest of routes... ] });

Vue.js 路由

阅读更多关于 Vue.js 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容 Vue.js 路由需要载入 vue-router 库安装，推荐使用淘宝镜像： cnpm install vue-router Vue.js + vue-router 可以很简单的实现单页应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> <div id="demo"> <h1>hello, cyy~</h1>  <router-link to="/about">about</router-link> <router-link to="/contact">contact</router-link> <hr>  <router-view></router

微信 H5 页面兼容性问题总结-1

阅读更多关于微信 H5 页面兼容性问题总结-1

1、ios端兼容input光标高度 **问题详情描述：**input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 **出现原因分析：**通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 **解决办法：**高度height和行高line-height内容用padding撑开。 2、ios端微信h5页面上下滑动时卡顿、页面缺失 **问题详情描述：**在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。出现原因分析：笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于 overflow-scrolling 用了原生控件来实现。对于有 -webkit-overflow-scrolling 的网页，会创建一个 UIScrollView

vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案

阅读更多关于 vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案

vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告（注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）方案一：安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -S 方案二：针对于路由跳转相同的地址添加catch捕获一下异常： this.$router.push('/location').catch(err => { console.log(err) }) 方案三：在main.js下注册一个全局函数即可（注：此处理方案只针对于vue-router 3.0以上版本哈！！！） import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 注：官方vue-router ≥3.0新版本路由默认回调返回的都是promise，原先就版本的路由回调将废弃

如何在github预览vue项目

阅读更多关于如何在github预览vue项目

预览地址： https://github.com/parchments/vue-admin-template 1、vue-router 不要开启 history 模式路径中的 # 比较丑，就开启了 vue-router 的 history 模式，去掉了 # 。平时做项目也是默认开启 history 模式。折腾了半天发现，我这是部署到 github pages ，服务器没有配置，导致页面一直请求不到。另外：vue.config.js中 // 如果是hash模式 publicPath: env !== "development" ? "./" : "/", // 如果是history模式 // publicPath: env !== "development" ? "/" : "/", 2、打包npm run build 打包完后本地打开index.html预览无误就下一步注意：vue-cli4需要配置vue.config.js，否则在git预览时会出现页面空白的情况（url错误），因为没有配置vue.config.js打包后的文件为index.html+js+css+images，而配置了vue.config.js的打包后为index.html+assets git push origin master 连dist也要提交 3、git subtree push --prefix

vue项目调微信的支付问题总揽

阅读更多关于 vue项目调微信的支付问题总揽

1、url授权 https://blog.csdn.net/sqz635262108/article/details/79208798 2、支付页面的路由必须是授权域名下的直属路由 3、ios手机端在微信浏览器上只会记录首次进入的页面的额url,所以再调微信支付时导致域名不对，支付失败解决办法：原因： vue-router无论是hash模式还是历史模式在ios微信浏览器中进入哪个页面复制链接或选择safari打开都是第一次进入的那个页面解决方式：在需要复制链接或选择safari打开的页面中，去created（）方法中执行replace（）重定向操作。 created () { let _href = window.location.href if (_href.indexOf('?replace=1') <= -1) { window.location.replace(_href + '?replace=1') } this.getCardInfo() }, 我一开始曾在 window.location.replace(_href + '/?replace=1') 加了一个 / 然后就报错了原因是浏览器会以为/下面是一个文件夹呢，就会有问题在路由拦截里处理办法来源： oschina 链接： https://my.oschina.net/u/3608045/blog

vue----打包上线引用外部cdn

阅读更多关于 vue----打包上线引用外部cdn

一般vue,vue-router,axios等其他库可以使用外部cdn 在webpack.base.conf.js里面 externals:{ 'vue':'Vue', 'vue-router':'VueRouter', 'axios':'axios' }, 然后在index.html页面加上外部资源 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script> 提示!!! 如果项目是已经启动了，需要重新启动，要不然会找不到VueRouter！！！ npm run dev 来源： https://www.cnblogs.com/cyany/p/12388515.html

windows安装npm教程

阅读更多关于 windows安装npm教程

windows安装npm教程 1、在使用之前，先类掌握3个东西，明白它们是用来干什么的： npm: nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install 就可以安装。 2、nodejs下载网址： https://nodejs.org/en/ 【如果嫌下载的慢，可以下载其他网站上的，别人有现成的，下载的比较快】 3、下载好后，双击安装： 4、默认，下一步： 5、接受协议： 6、选择安装路径： 7、会默认自己添加环境变量： 8、接下去一路“next”，最后点击finish 9、安装好后，对应的各个文件的作用： 10、cmd打开终端： 11、检查是否正常 12、再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录： 13、然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:

解析Vue-router相关干货及工作原理

阅读更多关于解析Vue-router相关干货及工作原理

本文主要介绍了vue-router相关基础知识及单页面应用的工作原理，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块，然后通过修改hash来让页面展示我们想让看到的内容。那么为什么hash的不同，为什么会影响页面的展示呢？浏览器在这里面做了什么内容。以前#后面的内容一般会做锚点，但是会定位到一个页面的某个位置，这个是怎么做到的呢，和我们现在的路由有什么不同。（我能想到一个路由的展示就会把其他路由隐藏，是这样的吗）后面会看一看写一下这个疑惑，现在最重要的是先把基本概念弄熟。当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们起步 //*** router-link 告诉浏览器去哪个路由 //*** router-view 告诉路由在哪里展示内容 <div id="app"> <h1>Hello App!</h1> <p>

vuejs - Redirect from login/register to home if already loggedin, Redirect from other pages to login if not loggedin in vue-router

阅读更多关于 vuejs - Redirect from login/register to home if already loggedin, Redirect from other pages to login if not loggedin in vue-router

问题 I want to redirect user to home page if logged-in and wants to access login/register page and redirect user to login page if not logged-in and wants to access other pages. Some pages are excluded that means there is no need to be logged in so my code is right below: router.beforeEach((to, from, next) => { if( to.name == 'About' || to.name == 'ContactUs' || to.name == 'Terms' ) { next(); } else { axios.get('/already-loggedin') .then(response => { // response.data is true or false if(response

订阅 vue-router