Vue中的路由使用

在Vue中，通常使用Vue Router进行路由配置。

对于路由，我们可以新建一个叫做router.js的文件，然后把需要用到的将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

router.js的配置如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: function() {
        return import('./pages/index.vue')
      },
      ......
  ]
})

把mode配置为history可以把页面的url变得更加科学。原来的url后面会加上一个#号，而使用history则会把这个#取消。组件注册如routes里面写的一样。

注册组件之后，我们在页面中使用进行配置，用法与标签一样。然后跳转到的页面内容，由标签渲染出来。

我们知道，对于绝大多数网站，在进行页面跳转的时候，总是有一些组件是不会变化的。例如：Header，Footer或者Sider的部分，通常是不会变的。页面跳转的时候，只会对对应的部分进行渲染，这样就增加了使用体验。

除了用标签点击跳转之外，我们还能在代码中进行页面的跳转。router给我们提供了三个方法：

router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)

其中router.push和router.replace的用法是一样的，但是router.replace不会向 history 添加新记录。router.go则是提供了前进或者后退的功能。

例子：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// // 在浏览器记录中前进一步
router.go(1)

最后，有的时候，我们可能需要提供单独的几个页面，与其他页面不共用组件，而其他页面依然需要共用组件，这样怎么办呢？

事实上，在注册组件的时候，我们有一个children属性，在children属性里面的组件只会在对应的组件里面渲染。例如我们有一个home，一个about-me，然后我们需要在home里面又使用两个组件tab1和tab2，那么我们只需要在home的children属性里面注册这两个组件。之后在home里面的将渲染tab1和tab2，而不是跳转。

具体例子可以参考：

vue子路由