5. Vue路由介绍

一、概述

npm start：启动项目

npm run dev：启动项目

路由器管理路由;

什么是路由？

路由是一种映射关系，一个key对应一个value，key是path，对于后台路由，

value是处理请求的回调函数，对于前台路由value是组件。

说明：
1) 官方提供的用来实现 SPA(单个页面) 的 vue 插件
2) github: https://github.com/vuejs/vue-router
3) 中文文档: http://router.vuejs.org/zh-cn/
4) 下载: npm install vue-router --save

相关API说明：

1) VueRouter(): 用于创建路由器的构建函数
//创建实例(创建一个路由器出来)
new VueRouter({ 
// 多个配置项(配置对象)
})
2) 路由配置
routes: [
　　{ // 一般路由
　　　　path: '/about',
　　　　component: About
　　},
　　{ // 自动跳转路由
　　　　path: '/',
　　　　redirect: '/about'
　　}
]
3) 注册路由器(以上步骤是在路由器里面配置了路由，路由还没有配置)
import router from './router'
new Vue({
　　router // 配置路由器
})
4) 使用路由组件标签
1. <router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
2. <router-view>: 用来显示当前路由组件界面
<router-view></router-view>

二、使用

先下载vue-router包：