Vue-Router笔记

vue2.x版本中组件路由通过<router-link>标签配置，默认其将会被解析为一个<a>标签，当然你也可以使用tag属性将其渲染为其他的标签；进行了路由配置的组件可以通过<router-view>在HTML中整体渲染；当前router-link对应的路由处于激活状态时，自动被设置值为.router-link-active的class属性；<router-view>可以结合<keep-alive>标签一块使用

路由配置过程

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

---

动态路由

使用模式匹配将匹配到的所有路由都映射到同一个组件，是多对一的关系；动态路径参数使用:进行标示，可以同时使用多个动态路径参数，并通过this.$route.params.paramName进行访问；

模式 匹配路径 $route.params /user/:username /user/James
/user/Jordan {username: ‘James’}
{username: ‘Jordan’} /user/:username/NBA/:id /user/Kobe/NBA/24 {username: ‘Kobe’, id:24}

路由信息对象（route object）记录当前已激活路由的状态信息，并且包含了当前url解析的相关信息；route object是一个不可变对象，因此每次成功进行到新的URL后会重新创建对应的route object对象；

route object除了route.$params属性外，还有这些属性：
1、$route.path：String类型，对应当前的绝对路径；
2、$route.hash：String类型，当前路由的hash值(带#);
3、$route.query：Object类型，键值对格式，URL的查询参数；
4、$route.fullPath：String类型，包含hash和query的完整URL路径；
5、$route.matched：数组类型，当前路由在内的所有嵌套路由记录（路由记录：routes对象数组中的每个成员都是一个路由记录）；
6、$route.name：String类型，当前路由名称；

动态路由结合<transition :name=transitionName>组件可以实现根据动态路由实现不同的过渡效果；实例可以查看此处

// HTML<transition :name="transitionName">    <router-view></router-view></transition>// JSwatch: {    '$route' (to, from) {        const toDepth = to.path.split('/').length;        const fromDepth = from.path.split('/').length;        this.transitionName = toDepth < fromDepth ? 'scroll-left' : 'scroll-right';    }}

---

嵌套路由

嵌套路由需要在父组件的模板中加入<router-view>作为子组件的渲染出口，并在routes中使用children定义子组件中路由的映射；以下是来自Vue.js官网的示例；

const User = {  template: `    <div class="user">      <h2>User {{ $route.params.id }}</h2>      <router-view></router-view>    </div>  `}const UserHome = { template: '<div>Home</div>' }const UserProfile = { template: '<div>Profile</div>' }const UserPosts = { template: '<div>Posts</div>' }const router = new VueRouter({    routes: [      { path: '/user/:id', component: User,        children: [          // UserHome will be rendered inside User's <router-view>          // when /user/:id is matched          { path: '', component: UserHome },          // UserProfile will be rendered inside User's <router-view>          // when /user/:id/profile is matched          { path: 'profile', component: UserProfile },          // UserPosts will be rendered inside User's <router-view>          // when /user/:id/posts is matched          { path: 'posts', component: UserPosts }        ]      }    ]})

上例中为/user/foo通过''进行映射，否则/user/foo无法匹配到任何路由；

---

编程式导航

vue有三种路由模式，分别是history（基于HTML5 history API）、hash（默认, url hash，所有浏览器支持）和abstract（支持所有JavaScript运行环境）；其中history路由模式是模仿window.history API得到的，对应有route.push(location)、route.replace(location)、route.go(n)方法进行导航；route.push()和route.replace()方法可以接受的参数类型包括字符串及多种不同类型的路由：

route.push('home');route.push({path: 'home'});route.push({path: 'home', name: 'google'});route.push({params: {uid: 123});route.push({path: 'register', query: {username: 'Kobe'});

命名路由和命名视图

命名路由可以前边已经提到，就是在创建VueRouter实例时，为path路径添加一个name属性，然后就可以直接使用包含name属性的对象传递给<router-ling>的to属性（路由信息对象），而不用直接使用相应的URL，这样后期修改的时候只需要修改VueRouter实例中；

为了在同一页面中不使用组件嵌套同时展示多个视图，可以使用命名视图，相应的关键字为components；需要注意其与嵌套路由的区别；

const router = new VueRouter({  routes: [    {      path: '/',      components: {        default: Foo,        a: Bar,        b: Baz      }    }  ]})

重定向和别名

重定向使用redirect关键字，而别名则可以跳出嵌套路由访问的限制，实例可以查看[我的JSFiddle示例]

const router = new VueRouter({  routes: [    { path: '/a', redirect: '/b' }  ]})

// HTML<div id="app">  <router-link to="/abc">foo</router-link>  <router-link to='/x'>bar</router-link>  <router-l// JSconst Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }const Baz = { template: '<div>baz</div>' }const router = new VueRouter({  //mode: 'history',  routes: [      { path: '/x',      component: Bar,      alias: '/xyz'    },    { path: '/',      component: Foo,      alias: '/abc'    },    { path: '/p',      component: Baz,      alias: '/opq'    }  ]})

---

滚动行为

Vue-Router提供了自定义页面切换路由时控制页面的滚动方式；前提是需要设置mode为history，也就是说不支持HTML5 history API的浏览器是不支持该特性的；

关键词为scrollBehavior(to, from, savedPosition)方法；to和from都是路由对象，而savedPosition仅在popState事件被触发后（使用浏览器的back/forward导航按钮）才使能；返回值为包含x坐标和y坐标的对象或者表示某个锚点的选择器对象{selector: string}；具体效果可以参考jsFiddle

const scrollBehavior = (to, from, savedPosition) {    if (savedPosition) {        // check if history popstate navigatios are available        return savedPosition;    } else {        const position = {};        // check if hash is available        if (to.hash) {            position.selector = to.hash;        }        // check if any matched route config has meta that requires scrolling to top        if (to.matched.some (m => m.meta.scrollTop)) {  // $router.matched            position.x = 0;            position.y = 0;        }        return position;    }}

路由的懒加载

在访问大型应用时，较较多的JS脚本加载时间明显影响网站加载的速度，结合Vue的异步组件和webpack的代码分割功能（分割模块，可以仅加载依赖模块）实现路由组件的懒加载，可以有效的提高网站打开速度，在后期需要时再加载其他模块；

具体内容可以查看官方文档

---

Router配置

router对象具有mode（路由模式）、base（基路径）、routes（路由组件映射）、linkActiveClass(可以修改默认激活路由的类属性名称)、scrollBehavior（滚动行为）；具有参见官方文档

---

Router实例

属性：
1、router.app：Vue实例类型，配置了router的Vue根实例
2、router.mode：String类型，路由模式
3、router.currentRouter：Route类型，当前路由的路由信息对象；

方法：
1、router.go(n) 、router.back()、router.forward()
2、router.push(location, onComplete?, onAbort?)、router.replace(location, onComplete?, onAbort?)
3、router.addRoutes(routes) 动态添加新路由规律
4、router.onReady(callback) 第一次路由跳转完成时被调用
5、router.resolve() 解析目标位置

---

参考文献

1、Vue-Router官方文档

2、GitHub代码示例： https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js