目的:浏览器地址栏输入了未匹配的地址时,前端控制跳转到首页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. 如何在一台主机上管理自己的多个git repository

    在使用git时,通常是直接ssh-keygen生成默认秘钥.然后将共钥添加到远程仓库,就可以访问了. 但是,当我们有多个repository时,这种方式就不适用了,因为一个秘钥只能关联一个远程仓库. ...

  2. 论文笔记——ThiNet: A Filter Level Pruning Method for Deep Neural Network Compreesion

    论文地址:https://arxiv.org/abs/1707.06342 主要思想 选择一个channel的子集,然后让通过样本以后得到的误差最小(最小二乘),将裁剪问题转换成了优化问题. 这篇论文 ...

  3. 提高Intellij创建Maven工程的速度

    按照默认的方式创建Maven工程的时候会发现Maven插件加载的很慢如下 解决方法:在创建的过程中,在Properties中添加一个参数archetypeCatalog=internal . 因为ar ...

  4. TeamViewer 说明截图

  5. selenium_webdriver(python)获取元素属性值,浏览器窗口控制、网页前进后退,title/url打印

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

  6. Java读写记事本文件

    Java中我们也会考虑读写记事本,文件读取如下: public static void main(String[] args) { try { String path="d:\\abc.tx ...

  7. GO 和 KEGG 的区别 | GO KEGG数据库用法 | 基因集功能注释 | 代谢通路富集

    一直都搞不清楚这两者的具体区别. 其实初学者搞不清楚很正常,因为它们的本质是相通的,都是对基因进行归类注释的数据库. 建议初学者自己使用一下这两个数据库,应该很快就能明白其中的区别. (抱歉之前没讲清 ...

  8. JQuery.Ajax()的data参数传递方式

    最近,新学c# mvc,通过ajax post方式传递数据到controller.刚开始传递参数,controller中总是为null.现记录一下,可能不全,纯粹记个学习日记. 重点在于参数的方式,代 ...

  9. codeforces 559b//Equivalent Strings// Codeforces Round #313(Div. 1)

    题意:定义了字符串的相等,问两串是否相等. 卡了时间,空间,不能新建字符串,否则会卡. #pragma comment(linker,"/STACK:1024000000,102400000 ...

  10. python-day42--单表查询

    1. 简单查询select * from employee;select name,salary from employee; 2. where条件           1.比较运算符:> &l ...