Vue路由基本知识

路由基本知识"/>

Vue路由基本知识

       路径基本知识

<router-link>在HTML历史模式和散列模式下的工作方式相同，历史模式下router-link将拦截click事件，浏览器不会重新加载页面。

push

单击时，to prop的值将传递到router.push()内部，因此该值可以为字符串或者位置描述符。

<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
<a href="home">Home</a><!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link><!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link><!-- same as above -->
<router-link :to="{ path: 'home' }">Home</router-link><!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link><!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

替换，replace prop将调用router.replace()，导航不会保留历史记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

追，道具始终将相对路径附加到当前路径，例如导航/a到一个相对链接b，append我们最终会到达/a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

标签，将<router-link>渲染为另一个标记，使用tag来指定程序的标记，仍然会监听事件并进行导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- renders as -->
<li>foo</li>

active-class:配置链接处于活动状态时应用的CSS类。

准确：具有匹配行为，只要当前路径以指定路径开头就会应用此类/a，如果没有exact每条路径都会被激活，因此需要使用exact指定可以激活的路径。

<!-- this link will only be active at `/` -->
<router-link to="/" exact>

<router-view>呈现给定路径的匹配组件，呈现的组件包括其本身和嵌套路径的组件。它只适用于<transition>和<keep-alive>。

<transition><keep-alive><router-view></router-view></keep-alive>
</transition>

路由器构件选项：

declare type RouteConfig = {path: string;component?: Component;name?: string; // for named routescomponents?: { [name: string]: Component }; // for named viewsredirect?: string | Location | Function;props?: boolean | Object | Function;alias?: string | Array<string>;children?: Array<RouteConfig>; // for nested routesbeforeEnter?: (to: Route, from: Route, next: Function) => void;meta?: any;// 2.6.0+caseSensitive?: boolean; // use case sensitive match? (default: false)pathToRegexpOptions?: Object; // path-to-regexp options for compiling regex
}

模式：

1. hash:使用URL哈希进行路由
2. history:需要HTML5 History API和服务配置
3. abstract:浏览器没有API，路由器将自动强制进入此模式。

       动态路线匹配

       动态段由冒号表示，动态段的值将this.$route.params的每个组件中公开。

const User = {template: '<div>User {{ $route.params.id }}</div>'
}

  路由对象：内部组件this.$route，内部$route观察者回调。

  内部导航收尾作为前两个参数

router.beforeEach((to, from, next) => {// `to` and `from` are both route objects
})

   路由对象属性：