引入路由的原因：
实现单页面应用（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:Home
children:
[{path:'message',
component:Message},
{
{path:'news',
component:News
}]
}]
})
当然相对应的router-link也要发生改变(要写完整路径)
<router-link to="/home/news">dnajksaj</router-link>
路由参数一：
类似于组件传参（在每个模板后面写入参数），路由也可以传参（在每个router-link后面写入参数）。并且路由传递参数时，使用的是query这么一个参数
这是传参
html
<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>这是接收使用参数
html
<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属性值
html
routes:[
{
name:'guanyu',
path:'/about',
component:About
}
]有了name后就可以直接调用
html
<!--简化后，直接通过名字跳转 -->
<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'],
总结
其实路由还有一些其他的知识点，比如缓存路由以及另外两个生命周期，路由守卫。这里再下一章节进行讲解