vue-router配置之通用路径
目的:浏览器地址栏输入了未匹配的地址时,前端控制跳转到首页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配置之通用路径的更多相关文章
- vue router获取整条路径参数
$route.path 当前路由对象的路径,如'/vi$route.query 请求参数,如/foo?user=1获取到query.user = 1$route.router 所属路由器以及所属组件信 ...
- vue router 配置默认页/404页面
*号通配404默认页面
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- Vue Router的配置
1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
随机推荐
- grep如何结尾匹配
答:grep "jello$" 如:git branch输出以下内容: yes-jello-good yes-jellos yes-jello 那么使用以下命令只能过滤出一行: $ ...
- LaTex: Undefined citation warnings 解决方法
参考 Undefined citations LaTex: Undefined citation warnings 解决方法 在使用TexMaker编译文献的时候,出现引用参考文献的问题: Packa ...
- P4-Related Tools Installation
P4-Related Tools Installation 安装P4相关工具的步骤和说明. 本说明只适用于 Ubuntu 14.04 系统. 推荐安装的其他工具 mininet:SDN网络仿真工具 v ...
- 下列java代码中的变量a、b、c分别在内存的______存储区存放。
class A{ private String a = "aa"; public boolean methodB(){ String b = "sb"; fin ...
- C# asp.net 比较两个时间的差求天数
string str1 = "2017-2-13 23:59:59"; string str2 = "2017-2-14 0:00:01"; DateTime ...
- sublime+LatexTools引用参考文献
在用sublime+LatexTools一段时间之后,发现用它来写Latex真的是非常方便,配置好TexLive之后直接CTRL+B就可以直接编译运行了,so cool!但是最近写课程论文的时 ...
- c++ 指定长度容器元素的拷贝(copy_n)
#include <iostream> // cout #include <algorithm> // copy #include <vector> ...
- Jmeter 测试API接口 查看接口的幂等问题
背景介绍: 比如一个注册接口,要求填入的手机号与DB中已有的不能重复, 如果手机号码重复,则此次注册失败,不会新增会员数据: 如果不重复,则注册成功(忽略其他因素). 但是用20个并发,同样的请求,请 ...
- Jmeter高阶学习,运用NotePad++编写工程,随意复制多个工程到同一个工程
Jmeter创建了工程之后,保存文件后就是一个jmx后缀的文件,你有没有试过单独用文本编辑器打开文件,编辑文件? Step1: 最简单的Jmeter工程,只有一个测试计划 <?xml versi ...
- Eclipse如何快速改变主题颜色
厌倦了Eclipse的白底黑子,我们来更换下Eclipse的主题颜色,让眼睛更舒服一点 首先先进入网址:http://eclipsecolorthemes.org/ 选择一个主题进入,点击进入如下: ...