目的:浏览器地址栏输入了未匹配的地址时,前端控制跳转到首页index页面:

项目入口js:(一般根据项目结构不同,这个js一般取名为:app.js或者main.js)

import Router from 'vue-router'

Vue.use(Router);

const router = new Router({
routes: [
{path: "/index", component: HomePage},
{path: "/login", component: Login},
{path: "*", redirect:'/index'},//这个意思就是如果浏览器地址栏输入的不是'/index'也不是'/login',那我就让它跳转到'index'页面
]
});

备注:

{path: "*", redirect:'/index'}

*号代表匹配所有路径,注意这句要放在其他路径的最后面。

由于我这个前端项目只配置了2个路径:‘index’和'login',所以我需要当浏览器地址栏输入的不是'/index'也不是'/login'时,那我就让它前端控制路由跳转到'index'页面,(是为了用户体验不要太诡异)

vue-router配置之通用路径的更多相关文章

  1. vue router获取整条路径参数

    $route.path 当前路由对象的路径,如'/vi$route.query 请求参数,如/foo?user=1获取到query.user = 1$route.router 所属路由器以及所属组件信 ...

  2. vue router 配置默认页/404页面

    *号通配404默认页面

  3. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  4. Vue Router的配置

    1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...

  5. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  6. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  8. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  9. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

随机推荐

  1. Linux命令中:rsync和cp之间的区别

    rsync:只拷贝那些更新的文件: cp -u:也可以实现类似效果: 两者都基本可以满足备份的需求: 只是一般情况下,用rsync做这类备份之类的事情,更多见: 在备份的操作中,拷贝,过期文件的删除是 ...

  2. LOJ#2170. 「POI2011」木棍 Sticks

    题目链接 题意就是给你一堆线段,然后线段有长度和颜色,让你选三条组成一个三角形,这三条线段颜色不能一样 题解: 做法:贪心 首先按照长度给这些线段排序一遍 然后贪心的去选,对于已经选出来同种颜色的,就 ...

  3. 论文笔记——NEURAL ARCHITECTURE SEARCH WITH REINFORCEMENT LEARNING

    论文地址:https://arxiv.org/abs/1611.01578 1. 论文思想 强化学习,用一个RNN学一个网络参数的序列,然后将其转换成网络,然后训练,得到一个反馈,这个反馈作用于RNN ...

  4. ASP.NET MVC之Bundle压缩JS和CSS

    介绍Bundle之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件 ...

  5. Java ServletContext详解

    转载: ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而servletConte ...

  6. jquery扩展的两个方法与区别 $.extend $.fn.extend

    jQuery.extend:Query本身的扩展方法 jQuery.fn.extent(Object) jquery 所选对象扩展方法 jQuery.extend 我们先把jQuery看成了一个类,这 ...

  7. C++宏定义不受命名空间的约束

    // xxx.h namespace A { #define xxx() xxxxx } // 在其他文件中,引入xxx.h文件,使用宏定义时,不需要加命名空间 // yyy.cpp #include ...

  8. spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获

    spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获 当你的某个控制器内的某个方法报错,基本上回显示出java错误代码,非常不友好,这 ...

  9. [.NET开发] C# BigInteger 处理超大整型数字

    今天遇到一个要处理XSD中Integer的数值区间的计算的问题,Integer这个类型的值区间理论上是可没有边界的,假设目前的值是1.5E+10000, 这个数字已经达到double和Int64都无法 ...

  10. CDS & ORF & 启动子 & 终止子 & 转录因子 & 基因结构 & UTR

    ORF和CDS的区别 ORF的英文展开是open reading frame(开放阅读框). CDS的英文展开是coding sequences (编码区). CDS:DNA转录成mRNA,mRNA经 ...