在使用vue-router前要先安装vue-router库，不做详解。
cnpm install vue-router –save用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
vue-router有三个要素：路由map 、路由视图和路由导航。
路由map：指路由与组件的映射关系；
路由视图：指路由映射对应组件的渲染位置；
路由导航：指可以使地址栏发生变化的导航链接。
01
路由map
通过import导入并定义Vue模块、vue-router模块和需要使用的组件；如果使用模块化机制编程导入Vue和VueRouter，要通过全局方法use()来注册安装vue-router；实例化全局router，并传入对应的配置，包括路径path和组件components；在Vue实例中注册组件。
import Vue from 'vue'import App from './App'/*1、引入vue-router模块*/import VRouter from 'vue-router'import Apple from './components/apple'import Banana from './components/banana'Vue.config.productionTip = false//2、用全局方法use()来注册安装vue-routerVue.use(VRouter)//3、实例化一个全局路由router let router=new VRouter({ //以下是路由map routes:[ { path:'/apple', component:Apple }, { path:'/banana', component:Banana } ]});new Vue({ el: '#app', //通过 router 配置参数注入路由， 从而让整个应用都有路由功能 router, //4、注册组件 components: {App,VRouter,Apple,Banana}, template: '<App/>'})有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建 router实例的时候，在 routes 配置中给路由设置名称。
let router=new VRouter({ mode: 'history', //以下是路由map routes:[ { path:'/apple', name: 'applename', component:Apple }, { path:'/banana', name: 'banananame', component:Banana } ]});
02
路由视图
路由匹配到的组件将渲染在这里。
<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件,如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。
<router-view> </router-view>03
路由导航
<router-link>
通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名“router-link-active”。
<router-link :to="{path:'apple'}"> to apple</router-link> <router-link :to="{path:'banana'}">to apple</router-link>router.push({ })
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push({ path: 'apple' }点击 <router-link :to="..."> 等同于调用 router.push(...)。
<router-link :to="..."> to里的值可以是一个字符串路径，或者一个描述地址的对象，例如：
// 字符串<router-link to="apple"> to apple</router-link>// 对象<router-link :to="{path:'apple'}"> to apple</router-link>// 命名路由<router-link :to="{name: 'applename'}"> to apple</router-link>//直接路由带查询参数query，地址栏变成 /apple?color=red<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>// 命名路由带查询参数query，地址栏变成/apple?color=red<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>// 命名路由带路由参数params，地址栏是/apple/red<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>同样的规则也适用于router.push(...)方法。
1、关于带参数的路由总结如下：
无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;
2、设置路由map里的path值：
带路由参数params时，路由map里的path应该写成: path:'/apple/:color' ;
带查询参数query时，路由map里的path应该写成: path:'/apple' ；
3、获取参数方法：
在组件中： {{$route.params.color}}
在js里： this.$route.params.color
dvdf
感谢阅读~
