路由配置项：
import Router from ‘vue-router’
1、path：路径
2、component：路径正确时显示的组件
重定向：path redirect 访问根目录的时候，匹配的路径
匹配所有,在最后，（路径不对时），path：‘**’ component：Home
学习地址：vue官网，vue router https://router.vuejs.org/zh/
路由跳转：
1、<a href="#/home"> 不推荐
2、<router-link to="/home"> 比a标签多一个router-link-active 的class属性
3、编程式导航：this.$router.push()
路由嵌套：（尽量不要嵌套超过3层）
页面的子页面 出现详情页
index.js 中导入，在要嵌套的页面路径导入 children [] 里面的path不加/ ,
命名路由：（6个）
path
component
children 如： children:[ { },{ }] ，{ }里面写路由的参数
name ： 路由的名字
解决当path路径太长的情况
将path换为name，如
footer 中 <router-link :to="{name:item.name}">
home 二级嵌套中 <router-link :to="{name:'homedetails'}">
redirect 重定向 如；redirect:'/home'
路由传值：find页面
根据不同路径返回不同页面，页面间传值，显示不同的组件
组件传值是组件之间有依赖
1、params
在路由path中添加属性
path:'/details/:name/:id' 需提前定义！！！
find中 ：
to="'/detail/' + item + '/'+ index" (无大括号！！！)
接收用this.$route.params
当不传值时，路径匹配不上，path为** 返回首页
<router-link :to="{name:'homedetails',params:{ name:item,id:index}}">
接收用
信息比较重要的时候使用，一般都用parms,的后一种方法！
2、query (最轻松)
path中不需要提前定义 path:'/details'
<router-link :to="{name:'homedetails,query:{ name:item,id:index}'}">
接收用this.$route.query
3、路由解耦
当使用parms传值的时候，可以再路由的配置项中添加一个属性props：true，这样在接收路由参数的组件中，用props( props:['name','id'] )直接接收数据，而不用this.$router
原因：query传值中属性key值 name,id 等可以随意更换不固定，而params中name，id是固定的，所以路由解耦用parms
4、编程式导航，
传值时，传过来的值在$route 中
导航时，方法都在this.$router 中
push 是跳转 详见下面
back 是返回 this.$router.back() 即可
forward 前进 ？？
replace 替换所有当前路径（前进后退不能使用，因为之前的记录全部销毁），需要参数，如：this.$router.replace('/find')
go()
-1 后退 ； 0 刷新 ； 1 前进 ； (均表示页数)
li循环，添加@click，methods中调用方法，方法内容为
//如果params传值，不能使用path，用name 传值
this.$router.push({ name:'details',params:{ name:item,id:index } })
//如果用query传值,path 和 name 均可。注意index.js 中的路径
this.$router.push({ path:'details',params:{ name:item,id:index } })
path 后加 / 吗？？？
this.$router.push({ name:'details',params:{ name:item,id:index } })