Vue.js的一大特色就是 构建单页面应用十分方便 ，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。总体来说，vue-router设计得简单好用，下面就来聊聊我实际用到过的一些方法，文章没有提到的可以去查看官方文档。
只要在组件中存在 <router-link>,同组件中放<router-view>，用来展示当前路由响应所要渲染的组件。
我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

先上例子：

HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- 通过传入 `tag` 属性指定想要渲染出来的标签. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo" tag='button'>Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里，router-view是个全局组件 -->
  <router-view></router-view>
</div>

javascript

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
  // 可以从其他文件 import 进来(es6引入方法)
  //import Foo from 'components/Foo';
  //import Bar from 'components/Bar';

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
//4. h5线上模式不使用hash方式跳转，要使用history模式进行路由跳转
+ mode:'history',
const router = new VueRouter({
  mode:'history',//h5线上模式
  routes // （缩写）相当于 routes: routes
})

// 5. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能


const app = new Vue({
  router
}).$mount('#app')
//或者这样写
//const app = new Vue({
  //el: '#app',
  //router
//});

// 现在，应用已经启动了！

动态路由匹配

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

路径参数.jpg

• 使用模块化编程的形式，用.vue单文件components/Foo.vue或components/Bar.vue
• ps:当使用路由参数时，例如从 /user/foo 导航到 /user/bar（同级跳转情况），原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

router-view

• 用来渲染匹配到的路由的。
• 可以给router-view组件设置transition过渡
• 还可以配合<keep-alive>使用，keep-alive可以缓存数据，这样不至于重新渲染路由组件的时候，之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后，点击进入另一个路由组件b，再回到路由组件a的时候之前的DOM操作还保存在，如果不加keep-alive再回到路由组件a时，之前的DOM操作就没有了，得重新进行。
• .router-link-active 是自带的变化的路由的类名，可以用来修改选中的router-link按钮的样式

 .router-link-active{
            background: lightgreen;
        }

<keep-alive>
    <router-view></router-view>
</keep-alive>

嵌套路由

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

var Home={template:'#home'}
var List={template:'#list'}
var Detail={template:'<h1>detail页面</h1>'}
var router=new VueRouter({
     routes:[
            { path:'/home',
              component:Home,
              children:[
                        {path:'login',component:{template:'<h2>登录111</h2>'}},// /home/login的路由
                        {path:'reg',component:{template:'<h2>注册111</h2>'}}// /home/reg的路由
                    ]
            },
            { path:'/list',
              component:List,
              children:[
                        {
                            path:'news/:id',//访问的路径是/list/news/:id 
                            beforeEnter(to, from,next){//导航守卫//在导航成功前执行
                            //第一次进入的参数的id
                                console.log(to.params.id);
                                next()
                            },
                            //------------这个组件会被渲染在List组件的<router-view>中-------------
                            component:{template:'<h2>list{{$route.params.id}}</h2>'}
                        },
                        {
                            path:'',//-----访问的路径是/list时还要渲染子组件中的router-view时，可以使用空的子路由-------
                            beforeEnter(to, from,next){//导航守卫//在导航成功前执行
                            //第一次进入的参数的id
                                console.log(to.params.id);
                                next()
                            },
                            //这个组件会被渲染在List组件的<router-view>中
                            component:{template:'<h3>当访问的是/list的时候不但展示list组件还要在list的router-view中展示我</h3>'}
                        }
                    ]
            },
            {path:'/detail',component:Detail},
            {path:'*',component:Home}//默认错误的地址跳到首页
          ]
      })
    //2.把配置好的router，放在app实例中
    var app=new Vue({
        router,//把配置好的router，放在app实例中
        el:'#app'
    })

渲染结果：

router.png

• 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

• 你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现导航。

在 Vue 实例内部，你可以通过 router.push

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123（命名路由能使用name，其他的只能使用path）
router.push({ path: `/user/${userId}` }) // -> /user/123
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.push({ path: `/user/${userId}` }) // -> /user/123  (变量拼接)

// 这里的 params 不生效,如上：要用name对应params
router.push({ path: '/user', params: { userId }}) // -> /user

router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go基本一致

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

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

重定向的目标也可以是一个命名的路由

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

一个方法，动态返回重定向目标

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})