目的:浏览器地址栏输入了未匹配的地址时,前端控制跳转到首页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. Dubbo学习参考

    参考博客: 小宝鸽:https://blog.csdn.net/u013142781/article/details/50387583 https://blog.csdn.net/u013142781 ...

  2. 【第二十五章】 springboot + hystrixdashboard

    注意: hystrix基本使用:第十九章 springboot + hystrix(1) hystrix计数原理:附6 hystrix metrics and monitor 一.hystrixdas ...

  3. 【第八章】 springboot + mybatis + 多数据源

    在实际开发中,我们一个项目可能会用到多个数据库,通常一个数据库对应一个数据源. 代码结构: 简要原理: 1)DatabaseType列出所有的数据源的key---key 2)DatabaseConte ...

  4. C# 查出数据表DataTable 清除一列中的重复项保留其他项

    http://bbs.csdn.net/topics/391085792     DataTable 老表= 新表.AsEnumerable().GroupBy(p => p["姓名& ...

  5. C#学习笔记(十二):构造函数、属性和静态类

    面向对象 简写重载的方法:重载中如果逻辑重复的情况下,用参数少的调用参数多 参数空缺,可以用null填补 using System; using System.Collections.Generic; ...

  6. 如何给域名配置https证书

    http和https的区别就是,后者在网络传输过程中会很安全,原因就是给http安装了SSL证书. SSL证书有免费的和收费的,收费的顾名思义就是保护的方面更多,更安全.收费的像单域名的一年有几百.几 ...

  7. python enumerate用法总结--转载

    enumerate()说明 enumerate()是python的内置函数 enumerate在字典上是枚举.列举的意思 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enum ...

  8. java命令行执行程序解决依赖外部jar包的问题

    用java命令行直接执行程序,如果这个程序需要引用外部jar包.就不能单纯用java xx来执行 如果你的jar包和程序就在一个目录: 编译 javac -cp D:\yy\yy.jar,D\xx\x ...

  9. ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) D. The Door Problem 2-SAT

    题目链接:http://codeforces.com/contest/776/problem/D D. The Door Problem time limit per test 2 seconds m ...

  10. OpenVPN Windows 平台安装部署教程

    一.环境准备: 操作系统Windows 服务器IP:192.168.88.123  VPN:192.168.89.1 客户端IP:192.168.78.3 客户端服务端单网卡,路由器做好端口映射 安装 ...