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文件也会越来 ...
随机推荐
- shell脚本中如何使scp不输入密码即可传输文件
答:使用ssh密钥对 示例如下: 如果A机想要获取B机上的文件,那么需要将在A机上生成的公钥放置到B机上的指定位置~/.ssh/authorized_keys 问题一: 如何在A机上生成ssh密钥对? ...
- hash入门
如果你已经确保自己的hash技巧已经入门,那么请左转这篇博文 首先介绍一下hash? 事实上是一种叫做蛤丝的病毒 以下讲到的hash都是OI中最常用到的hash方法:进制哈希 做法: 首先设一个进制数 ...
- 05_Flume_timestamp interceptor实践
1.目标场景 2.Flume Agent配置 # specify agent,source,sink,channel a1.sources = r1 a1.sinks = k1 a1.channels ...
- hdu 5671 Matrix 标记。。。有点晕
Matrix Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Problem ...
- Intel微处理器学习笔记(三) 不可见寄存器
参考资料: 1. http://blog.chinaunix.net/uid-20797642-id-2495244.html 2. http://www.techbulo.com/708.htm ...
- C# 集合-并发处理-锁OR线程 (转载)
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...
- Jmeter 中对响应报文处理后断言用到BeanShell Assertion
Jmeter中常用的断言可以是Response Assertion 如果需要对响应报文中的某个字符串进行解码,对解码之后的值在进行断言要怎么做呢? 仔细观察一下,可以用下面俩个元件 Regular E ...
- [原][osg][osgearth]简单的通过osgDB,读取高程tif,修改高程tif
ReadResult result; osg::ref_ptr<osgDB::ReaderWriter> reader = osgDB::Registry::instance()-> ...
- 批量删除Redis数据库中的Key
批量删除KeyRedis 中有删除单个 Key 的指令 DEL,但好像没有批量删除 Key 的指令,不过我们可以借助 Linux 的 xargs 指令来完成这个动作 redis-cli keys &q ...
- python - HTMLTestRunner 测试报告模板设置
python - HTMLTestRunner 测试报告模板设置 优化模板下载地址: http://download.csdn.net/download/chinayyj2010/10039097 ...