Vue教程（2）-路由篇Vue-Router

# 1、Router基础

<router-link></router-link>：路由导航，默认渲染成<a>标签
to:string | Location  # 目标路由的链接 
replace:boolean   # 是否留下 history 记录，默认值false
append:boolean   # 是否为相对路径，默认值false
tag:string   # 渲染指定标签，默认值<a>标签
active-class:string   # 链接激活样式，默认值"router-link-active"
exact:boolean   # 是否精准匹配，默认值false
event:string | Array<string>   # 触发导航的事件，默认值'click'
exact-active-class: string   # 精准匹配激活样式，默认值'router-link-exact-active'

<router-view></router-view>:渲染路径匹配到的视图组件
# 可配合<transition>和<keep-alive>使用：transition>keep-alive>router-view
name:string  # 设置名称，会渲染对应的路由配置中components下的相应组件

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2、Router构建选项

routes:Array<RouteConfig>
declare type RouteConfig = {
  path: string;
  component?: Component;
  name?: string;  # 命名路由
  components?: { [name: string]: Component };  # 命名视图组件
  redirect?: string | Location | Function;  # 重定向
  props?: boolean | Object | Function;
  alias?: string | Array<string>;  # 别名
  children?: Array<RouteConfig>;  # 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;

  // 2.6.0+
  caseSensitive?: boolean;  # 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object;  # 编译正则的选项
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

动态路由：使用冒号:标记如/user/:username。参数值会被设置到 this.$route.params
使用所有路由：通配符*
高级匹配模式：使用 path-to-regexp
同一路径匹配的多个路由，匹配的优先级按路由定义顺序。

mode:"hash" | "history" | "abstract"   # 路由模式,默认值"hash"
base:string   # 应用的基路径,默认值"/"
linkActiveClass:string   # 激活 class 类名,默认值"router-link-active"
linkExactActiveClass:string   # 精确激活的默认的 class,默认值"router-link-exact-active"
scrollBehavior:Function   # 滚动行为
parseQuery / stringifyQuery:Function   # 提供自定义查询字符串的解析/反解析函数
fallback:boolean   # 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式

1
2
3
4
5
6
7

# 3、Router实例属性和方法

# 实例属性
router.app: Vue instance  # Vue 根实例
router.mode: string   # 路由使用的模式
router.currentRoute: Route  # 当前路由对应的路由信息对象
# 实例方法
# 增加全局的导航守卫
router.beforeEach((to, from, next) => { /* must call `next` */ })
router.beforeResolve((to, from, next) => { /* must call `next` */ })
router.afterEach((to, from) => {})
# 动态的导航到一个新 URL
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
router.back()
router.forward()

router.getMatchedComponents(location?)  # 返回目标位置或是当前路由匹配的组件数组 
router.resolve(location, current?, append?) # 解析目标位置 
router.addRoutes(routes: Array<RouteConfig>)  # 动态添加更多的路由规则
router.onReady(callback, [errorCallback])  # 回调函数，路由完成初始导航时调用
router.onError(callback)   # 回调函数，路由导航过程中出错时被调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 4、Router对象

# 路由对象属性
$route.path: string  # 当前路由的路径，总是解析为绝对路径
$route.params: Object  # 包含了动态片段和全匹配片段
$route.query: Object  # 表示 URL 查询参数
$route.hash: string  # 当前路由的 hash 值
$route.fullPath: string  # 完成解析后的 URL
$route.matched: Array<RouteRecord>  # 当前路由的所有嵌套路径片段的路由记录   
$route.name  # 当前路由的名称
$route.redirectedFrom  # 重定向来源的路由的名字
# 组件注入
this.$router  # router 实例
this.$route  # 当前激活的路由信息对象(只读)

1
2
3
4
5
6
7
8
9
10
11
12

# 5、Router详解

引入VueRouter  # Vue.use(VueRouter)
定义 (路由) 组件  # const Foo = { template: '<div>foo</div>' }
创建 router 实例  # const router = new VueRouter({routes:[ { path: '/foo', component: Foo }]})
创建和挂载根实例 # const app = new Vue({router}).$mount('#app')

1
2
3
4

上次更新: 2021-05-10 14:08:54

← Vue教程（1）-基础篇 Vue教程（3）- 状态管理Vuex→