Vue路由是指：根据不同地址，创造不同页面。如单页面应用，不刷新整个页面，不频繁请求，请求数据，通过js操作（ajax），如：切换两个不同图片，不同地址，只需第一次需要请求，第2次共用请求资源，只需再请求一张图片即可
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。比如我点击关于 按钮，页面中怎么就正好能显示关于的内容。这就要在js 文件中配置路由。
路由中有三个基本的概念 route, routes, router。
1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
vue中使用路由时要把路径和组件对应起来，然后在页面中把组件渲染出来
下面开始使用前端路由
1、在通过vue-cli安装的vue项目里安装前端路由， npm install vue-router --save ，安装完后node_modules里面就有vue-router包了，pakage.json文件里也有
js文件配置
2、在入口文件src/mian.js。;在使用之前需要引入vue，import Vue from 'vue'。vue来自于模板提供的，从node_moudules中取 第一步： import VRouter from 'vue-router'，第二步，要告诉 vue 使用 vueRoute。Vue.use(VRouter)
3、 创建映射关系，什么地址到什么页面，定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component:home}。定义一组路由routes,由组成一个路由组:
const routes = [
{path: '/home', component: Home },
{path: '/about', component: About }
]
4、创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
let router = new VueRouter({ routes // routes: routes 的简写 })
5、配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了
const app = new Vue({
el:'#app',
router
})
最后：页面设置（html模版中）
在vue-router中, 它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link to="/home">Home</router-link>
执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的（即访问地址localhost:8080/#/apple localhost:8080/#/banana中有#号键）
当首次进入页面的时候，页面中并没有显示任何内容。这是因为首次进入页面时，它的路径是 '/'，我们并没有给这个路径做相应的配置。一般，页面一加载进来都会显示home页面，我们也要把这个路径指向home组件。但是如果我们写{ path: '/', component: Home },vue 会报错，因为两条路径却指向同一个方向。这怎么办？这需要重定向，所谓重定向，就是重新给它指定一个方向，它本来是访问 / 路径，我们重新指向‘/home’, 它就相当于访问 '/home', 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向
// 重定向 { path: '/', redirect: '/home' }
router参数——动态路由
通常不同的用户（就是用户的id不同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的path属性，不能写死，那要怎么设置? 导航到 user 组件，路径中肯定有user, id 不同，那就给路径一个动态部分来匹配不同的id. 在vue-router中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }，类比这里的苹果组件，颜色为参数，路由这么写 { path: '/apple/:color', component: apple},
一、设置参数
const router = new VueRouter({
mode:'history',
routes:[
//color作为参数传给当前home页面
{ path: '/apple/:color', component: apple},
{ path: '/banana', component: banana}
]
})
页面中改变，
<router-link to="/apple/red">apple</router-link>
<router-link to="/apple/green">apple</router-link>
二、在组件内部获取参数
设置了参数后，路由会往每个组件全局的router对象里插入当前页面的params，
添加了参数后，会匹配完整的带参数的路由，注入过来的参数，可以直接作为$route.params对象的属性，可通过$route.params.color访问
参数是一种很灵活的配置，带冒号的位置都是参数，不带引号的路径必须执行严格匹配
组件来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件，而是复用这个组件。组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（apple.vue中）利用watch 来监听$route 的变化。
<script> export default { data () { return { dySegment: '' } }, watch: { $route (to,from){ // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性 console.log(to); console.log(from); this.dySegment = to.params.id } } } </script>
嵌套路由
嵌套路由，主要是由我们的页面结构所决定的。当我们进入到苹果页面的时候，它下面还有分类，苹果颜色。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到红苹果
的部分。
在路由的设计上，首先进入到 apple,然后才能进入到RedApple等， 就相当于进入到了Apple
的子元素。所以vue 提供了childrens 属性，它也是一组路由,相当于我们所写的routes。
当我们进入apple页面时，它在children中对应的路由path 是空 '',要想点击apple时，要想渲染相对应的子组件，那还需要配置一条路由
在children数组下增加一条路由，如下
// 当进入到apple时，下面的组件显示 { path: "", component: RedApple }
Router-link 简单跳转，直接用to加路径即可，to='/apple'，前面若没有/,只有apple，则表示在当前路径跳转，有/则表示根目录。v-bind动态绑定的可以为对象，也可以为data里面绑定的，这个对象是{path:'/banana'}可以直接将参数自定义的传进来{path:'/banana'，params:{color:’yellow’},}banana组件里就可以获取到这个color
<router-link to='/apple/red'>to redapple</router-link>
<router-link :to="{path:'/banana'}">tobanana</router-link>
<router-link :to="{path:'/user'}">to user</router-link>
<router-link to='/apple'>to apple</router-link>
具名路由
根据名字就可以知道，这个路由有一个名字，那就直接给这个路由加一个name 属性，就可以了。 给user 路由加一个name 属性
命名路由的使用, 在router-link 中to 属性就可以使用对象了,
<router-link to="/apple/red">redApple</router-link> // 和下面等价
<router-link :to="{ name: 'applePalge', params: { color: red }}">User</router-link> // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定
命名视图：
Router-view标签加name属性，在main.js,路由配置中，component里给不同的视图指定不同的组件
Router-link默认渲染为a链接，若想在ul里面添加链接(导航)，那么可以在<router-link标签里添加 tag=’li’
在模板temple里面添加router-link是声明式导航，也可以在js里面添加编程式导航
如每次路由切换时，可以为其设定一些操作(检查用户登录状态)
Router.berforeEach(router.push({path:'/apple'}))
过渡配合router-view使用
动态组件（keep-alive）配合router-view使用,切换过的视图进行缓存
当前导航会添加样式router-link-active，可在配置中更改这个样式的状态
