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 routes
  components?: { [name: string]: Component }; // for named views
  redirect?: string | Location | Function;
  props?: boolean | Object | Function;
  alias?: string | Array<string>;
  children?: Array<RouteConfig>; // for nested routes
  beforeEnter?: (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
})

   

   路由对象属性：

      

属性名	类型	备注
path	string	绝对路径
params	键值对参数
query	查询键值对
hash	当前路由的哈希值
fullPath	完整解析URL
matched	routes和children对象的副本
name	路由的名称
redirectedFrom	重定向路由的名称