1.理解

1.1. 说明

1) 官方提供的用来实现 SPA 的 vue 插件

2) github:https://github.com/vuejs/vue-router

3) 中文文档:http://router.vuejs.org/zh-cn/

4) 下载:npminstallvue-router–save

1.2. 相关 API 说明

1) VueRouter(): 用于创建路由器的构建函数

   newVueRouter({

    // 多个配置项

})

2) 路由配置

routes:[

   {// 一般路由

      path:’/about’,

     component:About

   },

   {// 自动跳转路由

     path:’/’,

     redirect:’/about’

   }

]

3) 注册路由器

importrouterfrom’./router’

   newVue({

     router

  })

4) 使用路由组件标签

1.<router-link>: 用来生成路由链接

    <router-linkto=”/xxx”>GotoXXX</router-link>

2.<router-view>: 用来显示当前路由组件界面

   <router-view></router-view>

2.基本路由

2.1. 效果

基本路由.gif

2.2. 路由组件

Home.vue

About.vue

2.3. 应用组件:App.vue

<div>

<!–路由链接–>

    <router-linkto=”/about”>About</router-link>

    <router-linkto=”/home”>Home</router-link>

    <!–用于渲染当前路由组件–>

    <router-view></router-view>

</div>

2.4. 路由器模块:src/router/index.js

exportdefaultnewVueRouter({

    routes:[

   {

    path:’/’,

    redirect:’/about’

  },

  {

   path:’/about’,

   component:About

  },

 {

   path:’/home’,

  component:Home

    }

 ]

})

2.5. 注册路由器:main.js

importVuefrom’vue’

importrouterfrom’./router’

// 创建 vue 配置路由器

     newVue({

     el:’#app’,

     router,

    render:h=>h(app)

})

2.6. 优化路由器配置

linkActiveClass:’active’,// 指定选中的路由链接的 class

2.7. 总结: 编写使用路由的 3 步

1) 定义路由组件

2) 注册路由

3) 使用路由

<router-link>

<router-view>

原文链接：http://www.atguigu.com/jsfx/11695.html