引入路由的原因：
实现单页面应用（SPA）
什么是单页面应用：
1、点击跳转链接后直接在原本的页面展示。路径发生相应改变
2、整个应用只有一个完整页面
3、数据需要通过ajax获取
Vue2中的路由是什么：
Vue2路由是一个插件库叫做vue-router
需要引入
npm i vue-router应用方式
//插件引入
import VueRouter from 'vue-router'
//插件使用
Vue.use(VueRouter)配置项
我们已经知道一些配置项，比如data、methods、watch、computed、props、store等等
路由也有其对应的配置项。router
实际应用：
一般我们会在src文件夹中创建router文件夹，在文件夹中创建index.js
index.js内容如下：
第一步肯定是先引入一个库
import VueRouter from 'vue-router'第二步就是利用VueRouter这个构造函数创建实例
const router = new VueRouter
({})第三步 填写路径，以及每个路径所使用的组件
const router = new VueRouter
({routes:
[
{path:'about'component:About
},
{path:'home'component:Home
}
]
})创建了一个列表，然后列表里面存储的每个对象都是一组路由（路径+组件）
第四步 引入相关组件
import About from '组件路径' //请按照具体项目进行修改
import Home from '组件路径' //请按照具体项目进行修改第五步 暴露该路由器
export default Router
第六步 引入我们暴露出来的router在APP.vue中
import router from '../router' //从路由文件夹中引入路由第七步 写入配置项
new Vue({.....
router:router}) 第八步 指定跳转路径 router-link to
<router-link to="/about">About</router-link>第九步 指定展示位置
<router-view></router-view>组件分类
一般组件：直接写在".vue"组件中的比如
<start></start>路由组件:使用<router-view></router-view>指定展示地区的。或者是写在路由中的组件
所以一般我们将路由组件放到pages文件夹中
将一般组件放到components文件夹中
组件切换：
组件切换Vue默认被切换的组件被销毁
多级路由：（嵌套路由）
在配置router文件夹的index.js文件时利用一个配置项children
const router = new VueRouter
({routes:
[{
path:'/about',
component:About
},
{path:'/home',component:Homechildren:
[{path:'message',component:Message},{{path:'news',component:News
}]
}]
})当然相对应的router-link也要发生改变(要写完整路径)
<router-link to="/home/news">dnajksaj</router-link>路由参数一：
类似于组件传参（在每个模板后面写入参数），路由也可以传参（在每个router-link后面写入参数）。并且路由传递参数时，使用的是query这么一个参数
这是传参
<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数，to的字符串写法 --><!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> --><!-- 跳转路由并携带query参数，to的对象写法 --><router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}">{{m.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>export default {name:'Message',data() {return {messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}},}
</script>这是接收使用参数
<template><ul><li>消息编号：{{$route.query.id}}</li><li>消息标题：{{$route.query.title}}</li></ul>
</template><script>export default {name:'Detail',mounted() {console.log(this.$route)},}
</script>命名路由：
可以简化路由的跳转。其实我们可以发现在上面的代码中路径已经比较长了
/home/message/detail
我们使用一个name属性即可重命名
我们先加入一个name属性值
routes:[{name:'guanyu',path:'/about',component:About}]有了name后就可以直接调用
<!--简化后，直接通过名字跳转 --><router-link :to="{name:'hello'}">跳转</router-link>路由参数二：
其实，通过路由传递参数还可以通过params。
传递参数
params传递参数首先需要在index.js文件中的path中给出占位符
例如
path:'detail/:id'“：id”就是占位符
再在父级组件写入跳转的路径，以及要传递的参数
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link>路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
接收参数
子组件接收并使用
{{$route.params.id}}路由参数三：
通过props我们传递参数更加方便。
说实话我们并不需要将上述的路由参数全部都熟练学会，只是在我们学习他人思路的时候能流畅的看懂他人的代码。在日常的项目中我们只需要熟练使用某一种即可。毕竟我认为编程重要的的是一种思路。至于语法问题。多花点时间总会熟悉
我们只需要在router文件夹中index.js文件中要往哪个组件传递参数，就在哪个路由里写props
path:'message',component:Message,children:[{name:'xiangqing',path:'detail',component:Detail,props($route){return {id:$route.query.id,title:$route.query.title,}接着在相应的名为detail组件接收即可
props:['id','title'],总结
其实路由还有一些其他的知识点，比如缓存路由以及另外两个生命周期，路由守卫。这里再下一章节进行讲解
