Vue Router参数大全

Vue Router对象创建

在这里插入图片描述

Vue Router构建选项详解

参数类型默认值可选值描述
routesArray配置路由规则
modestring“hash” (浏览器环境) /“abstract” (Node.js 环境)“hash”/“history” / “abstract”配置路由模式
basestring/应用的基路径
linkActiveClassstringrouter-link-exact-active全局配置 默认的精确激活的 class
scrollBehaviorFunction配置滚动行为
parseQuery / stringifyQueryFunction提供自定义查询字符串的解析/反解析函数
fallbackboolean当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true

Vue RouteConfig 的类型定义

export interface RouteConfig {
  path: string;
  name?: string;
  component?: Component;
  components?: Dictionary<Component>;
  redirect?: RedirectOption;
  alias?: string | string[];
  children?: RouteConfig[];
  meta?: any;
  beforeEnter?: NavigationGuard;
  props?: boolean | Object | RoutePropsFunction;
  caseSensitive?: boolean;
  pathToRegexpOptions?: PathToRegexpOptions;
}
属性详解
path路径
name命名路由
component命名视图组件
components命名视图组件
redirect重定向路径
alias别名
children嵌套路由
meta路由元信息 使用$route.meta.属性可以获取
caseSensitive匹配规则是否大小写敏感？(默认值：false)
pathToRegexpOptions编译正则的选项

Vue Router Mode详解

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
版权声明：本文为qinwuxian19891211原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。