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>

// JS
watch: {
    '$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

// JS
const 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