vue-router是vue官方指定的路由库，让我们来撸一遍vue-router的基本概念吧！

安装

我是以直接下载的方式来引入vue-router的。

<script src="./lib/vue-router.js"></script>

使用vue-router

定义路由

const routes = [
  // 这里定义一个最基础的路由
  { path: '/b', component: ComponentB }
  // 动态路由
  { path: '/user/:id', component: User }
  // 命名路由
  { path: '/user/:id', name: user, component: User }
];

创建 router 实例

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

vue实例注入路由

通过 router 配置参数注入路由。

var app = new Vue({
 el: '#app',
 router: router,
 ......
})

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。

使用路由出口

<!-- 路由出口，与angular的router-outlet类似 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

路由跳转

router-link

通过router-link组件，我们可以进行路由的跳转。to属性的写法很多，请参考router-link。

<router-link to="/b">Component B</router-link>
<router-link :to="{ path: '/c' }">Component C</router-link>

编程式路由

router.push(location, onComplete?, onAbort?)

该方法的参数location可以是一个字符串路径，或者一个描述地址的对象。用法如下：

router.push('b');
router.push({path: 'b'})
router.push({path: 'user/1'})
router.push({name: 'user', params: {id: 1}})

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.replace(...)

ps：你也可以在router-link使用replace。

<router-link :to="..." replace>

router.go(n)

类似 window.history.go(n)。是history回退和前进的操作。

了解了上述几个点后，你基本上可以完成基本的路由功能了。

嵌套路由

一个组件内部也可以有路由视图router-view。

<div>
  <p>FatherComponent Content</p>
  <router-view></router-view>
</div>

于此同时需要在路由定义处添加children属性。也是类似嵌套的写法。

{
  path: '/father',
  component: FatherComponent,
  children: [
    { path: 'child', component: ChildComponent }
  ]
}

命名视图

当我们的布局是由几部分组成时，并且我们希望每一部分都有自己的路由，那么此时就不是嵌套路由了，而是多路由视图，这个时候我们就需要用到命名视图了。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

而在定义路由的时候也要对应好。

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

用watch监测路由

很多时候我们可能需要监测路由变化，那么需要在watch中监测’$route’，方法大体是’$route’ (to, from) {your code}

watch: {
  '$route': function (to, from) {
    this.fromRoute = from.path;
    this.toRoute = to.path;
    // 可以根据情况做一些后续的逻辑处理
    ......
  }
}

路由重定向

重定向的意思就是本来是要跳路由A的，但是定向到B。写法如下：

routes: [
  { path: '/b', component: ComponentB },
  // redirect为path的形式
  { path: '/a', redirect: '/b' },
  // redirect为name的形式
  { path: '/a', redirect: { name: 'compB'} },
  // 甚至是一个方法，动态返回重定向目标，这样我感觉都可以做路由守卫了。
  { path: '/a', redirect: to => {
    // 方法接收 目标路由 作为参数
    // return 重定向的 字符串路径/路径对象
  }}
]

路由别名

routes: [
  { path: '/a', component: A, alias: '/b' }
]

alias的意思是别名，通俗讲，你大名是张三，别人叫你阿三，你也答应了，阿三就是你的别名。反映到路由上就是说，b是a的别名，那我输入路由b，地址栏会显示b，但也会映射到A组件；如果输入a，那地址栏就还是a，组件也是A，没什么变化。

向路由组件传递props

在组件中使用 $route 会使之与其对应路由形成高度耦合，我们可以使用props的形式来重新定义。这样id就会作为一个prop属性，用来接收传递的数据。

// 路由定义
routes: [
  { name:'employee', path: '/employee/:id', component: Employee, props: true}
]
// 组件定义
const Employee = Vue.component('Employee', {
  props: ['id'],
  template: '<p>I am worker {{id}}</p>'
});

路由守卫

通过跳转或取消的方式守卫路由。

全局守卫

使用router.beforeEach注册全局的路由守卫：

router.beforeEach(function(to, from, next) {
  console.log('GLOBAL_beforeEach');
  if (to.path === '/my') {
    next(false);
    alert('You are not registered...');
  } else {
    next();
  }
});

next：一定要调用该方法来 resolve 这个钩子

next(): 进行管道中的下一个钩子。
next(false): 中断当前的导航。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。也可以传params的。

路由独享的守卫

利用beforeEnter钩子实现。

const routes = [
  {
    name:'user',
    path: '/user/:id',
    component: User,
    beforeEnter: function (to, from, next) {
      console.log('ROUTE_beforeEnter');
      next(false);
    }
  }
]

组件内的守卫

可以利用beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave几个钩子来定义守卫。

beforeRouteEnter用于拦截进入组件的情形。
beforeRouteUpdate用于当前路由改变，但是该组件被复用的情况，如/user/1 和 /user/2 之间跳转的时候。
beforeRouteLeave用于拦截离开组件的情形。

路由transition

router-view是基本的动态组件，所以我们可以用 transition组件给它添加一些过渡效果。

<transition name="slide">
  <router-view></router-view>
</transition>

路由切换时记住滚动的位置

创建 Router 实例时，指定scrollBehavior属性。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退 按钮触发) 时才可用。
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

更多功能实现请参考vue-router文档。

vue-router基础内容

安装