vue中的路由

       路由配置项：

       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 } })