const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home,
children: [
{ path: '', component: Default },
{ path: 'foo', component: Foo },
{ path: 'baz', name: 'baz', component: Baz },
{ path: 'with-params/:id', component: WithParams },
// relative redirect to a sibling route
{ path: 'relative-redirect', redirect: 'foo' }
]
},
// absolute redirect
{ path: '/absolute-redirect', redirect: '/bar' },
// dynamic redirect, note that the target route `to` is available for the redirect function
{ path: '/dynamic-redirect/:id?',
redirect: to => {
const { hash, params, query } = to
if (query.to === 'foo') {
return { path: '/foo', query: null }
}
if (hash === '#baz') {
return { name: 'baz', hash: '' }
}
if (params.id) {
return '/with-params/:id'
} else {
return '/bar'
}
}
},
// named redirect
{ path: '/named-redirect', redirect: { name: 'baz' }}, // redirect with params
{ path: '/redirect-with-params/:id', redirect: '/with-params/:id' }, // catch all redirect
{ path: '*', redirect: '/' }
]
})

别名

const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})

vue-router-7-重定向及别名的更多相关文章

  1. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  2. Vue Router基础

    路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...

  3. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

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

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

  5. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  6. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  7. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  8. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

  9. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  10. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

随机推荐

  1. js判断手指的上滑,下滑,左滑,右滑,事件监听

    原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...

  2. react点滴

    1.<SubSubComp {...this.props } /> 传递属性,{...props}的方式为组件传递了这两个属性,这就是JSX中的延展属性,"..."成为 ...

  3. Angular 学习笔记 ( 创建 library, 转换老旧的 library )

    更新 : 2018-10-28 不知道为什么在 ng 跑一直做不到 .d.ts 最后发现,如果有一个插件 propagating-hammerjs.ts 那么就在 root create 一个 pro ...

  4. 电脑用HDMI线分屏后,耳机或音箱没声音之完美解决!

    现今,由于工作需要,很多人都偏爱给自己的电脑进行分屏,两个显示器同时连接在一台电脑上,并进行“扩展这些功能显示”,从而大大提高了工作积极性和工作效率.本人在进行分屏后遇到了耳机没有声音的问题,并进行了 ...

  5. python中的异常处理tryexcept

    1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! 2.异常种类 names = ['张三','李四 ...

  6. python爬虫学习(三):使用re库爬取"淘宝商品",并把结果写进txt文件

    第二个例子是使用requests库+re库爬取淘宝搜索商品页面的商品信息 (1)分析网页源码 打开淘宝,输入关键字“python”,然后搜索,显示如下搜索结果 从url连接中可以得到搜索商品的关键字是 ...

  7. 有序广播和标准广播 --Android开发

    一.标准广播和有序广播也很容易理解的. 标准广播: (1)通过sendBroadcast()方法发送 (2)通过异步方式发送,广播接收者的执行顺序是不明确的 有序广播: (1)通过sendOrderB ...

  8. Lombok插件

    Lombok简介 Lombok是一款好用顺手的工具,就像Google Guava一样,在此予以强烈推荐,每一个Java工程师都应该使用它.Lombok是一种Java™实用工具,可用来帮助开发人员消除J ...

  9. hammer.js方法总结(只做了一个简单的demo)

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

  10. Bipartite Segments CodeForces - 901C (区间二分图计数)

    大意: 给定无向图, 无偶环, 每次询问求[l,r]区间内, 有多少子区间是二分图. 无偶环等价于奇环仙人掌森林, 可以直接tarjan求出所有环, 然后就可以预处理出每个点为右端点时的答案. 这样的 ...