VueRouter总结

# 组件跳转

组件类似于a标签链接跳转.推荐理由：

• 在history模式下，会触发守卫点击事件，让浏览器不再重新加载页面

• 在history模式下使用base选项之后。所有的to属性都不需要写基础路径了 —“ 默认为/“

• 可以使用JavaScript表达式

  ​

功能性组件

这个组件是一个functionnal组件，渲染路径匹配到的视图组件，router-view可以进行多层嵌套

router-view 的props：–name 如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件

我们有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。下面以一个设置面板为例：
/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

路由配置
{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

当然了

构建实例

const router = new VueRouter({
  routes,
  mode: 'history',
  linkExactActiveClass: 'active', //全局配置 <router-link> 精确激活的class 类名”
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if(savedPosition) {
      return savedPosition;
    }else {
      return { x: 0, y: 0 };
    }
  },
  base: '/',
  fallback: true //当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true
});

分析实例配置：
routes: 类型Array<RouteConfig>
  RouteConfig:
  	1. path: string
    2. component ? : Componetn; // 组件-推荐使用() => import('@/views/some/someList')
    3. name ? : string; //命名路由 --权限控制
    4. components? : {[name: string] : Compoent} // 命名视图组件--暂时不知道有什么用
    5. redirect? : string | Location | Function // 重定向 -- 修改路由有别与alias
    6. props? : boolean | Object | Function // 一般通过path/test2/:id来匹配路由信息
    7. alias? : string | Array<string> // 别名
      	-- a组件的别名是/b， 意味着，当用户访问路由/b的时候，url显示/b，但是路由实际匹配a组件内容
    8. children ? : Array<routeConfig> // 嵌套路由
    9. beforeEnter // 路由独享守卫
    10 meta ? : any // 设置元信息 通过$route.matched来获取 
      	-- if (to.matched.some(record => record.meta.requiresAuth)) {}
    		2.6+以后版本更新了下面2个config
    11 caseSensitive? : boolean // 匹配规则是否大小写敏感（默认：false）
    12 pathToRegexpOptions ? : Object  //编译正则的选项

路由对象的属性

$route.path: string // 绝对路径
$route.params: Object // 包含动态片段和全匹配片段
$route.query : Object // URL查询参数
$route.hash : string
$route.fullPath: string
$route.matched： Array<routeRecord> //路由记录--展示路由对象
$route.name : //当前路由的名称
$route.redirectedFrom: //如果存在重定向，即为重定向来源的路由的名字

实例属性

通过在Vue根实例router配置传入router实例，下面的这些属性成员会被注入到每个子组件里

• this.$router ： router实例–常见操作this.$touer.push()
• this.$route： 当前激活的路由信息对象，这个属性是只读的，属性看上面的内容↑

组件内部的配置选项

beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 因为当守卫执行前，组件实例还没被创建
   next(vm => {
       // 不！能！获取组件实例 `this`
  	// 可以通过 `vm` 访问组件实例
	})
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用 2.2新增
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。