vue中的路由

时间:2022-11-16 02:15:29
       路由配置项:
       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 } })