vue路由基础

路由模式

• hash 兼容性最好
• history 用户体验最好, 需要浏览器支持 history api
• abstract 将路由存到内存之中, 常用于手机APP

路由激活样式

• router-link-active

当前路径以导航路径开头,则算作匹配
例如 当前路由 /test
则 路由 “/” 会被匹配 , 路由 “/test” 也会被匹配
例如 当前路由 /test/detail
则 路由 “/test” 会被匹配

• router-link-exact-active

当前路径完全等于导航路径,则算作匹配
例如 当前路由 /test
则 路由 “/” 不会被匹配 , 路由 “/test” 会被匹配
例如 当前路由 /test/detail
则 路由 “/test” 不会被匹配

• exact属性

<RouterLink exact to="/test" />

添加 exact属性, 则表示必须要精确匹配才会添加类名 “router-link-active”

例如当前路由为 “/test/detail”

导航路径	exact	类名
/	true	无
/test	false	router-link-active
/aaa	true	无

• 类名更改

<RouterLink active-class="active" exact-active-class="exact-active" to="/test" />

将类"router-link-active"替换为"active"
将类"router-link-exact-active"替换为"exact-active"