【vue】------ 路由创建 ------ 【William】
【vue】—— 路由创建 —— 【William】
路由常用的配置项：
path：路由请求的路径 component：路由匹配成功后需要渲染的组件或者页面 tag:改变组件内部渲染的元素 假设组件内部渲染的是a标签 tag="li" 那么li就会替换a import Router from 'vue-router' import Home from "./views/Home.vue"; import List from "./views/list.vue"; Vue.use(Router) //路由的配置项 export default new Router({ //每一个路由的配置项,每一个路由都是一个对象 routes: [ { //请求的路径 pathname path:"/home", //path路径匹配成功后渲染哪个组件/页面 component:Home }, { path:"/list", component:List } ] })
路由跳转的方式：
1、<a href="#/home"></a> 2、<router-link to="/home"></router-link> to的路径会与path进行匹配，如果匹配成功会渲染component对应的组件 组件怎样才能在页面上进行展示： 必须依赖一个内置组件 <router-view></router-view> //展示路径匹配成功以后相对应的组件 3、直接调用$router.push 实现携带参数的跳转 getDescribe(id){ this.$router.push({ path:'/describe/${id}', }) }
路由的重定向：
redirect：重定向 （当访问一个路径时想展示另一个路径的页面） { path:"/", redirect:"/home" }
路由嵌套：
children：路由嵌套 children是一个数组 数组里存放对象 每一个对象都是下一级的路由的配置项 配置项的属性与routes里面的属性一样 name:命名路由 给当前路由取一个别名 children:[ { name:"city", path:"city", component:City } ]
路由传参：
路由传参： 路由的传参接收方式统一在this.$route里面 1、query传值接收方式 query传值?后面的参数 &进行链接 /user?name=zhangsan&age=18 传值的方式：通过?进行数据的拼接 每个字段之间用&分隔 类似与get请求的方式 接收:this.$route.query router.js页面： { name:"detail", path:"/detail", component:Detail, } 传递参数地址页面： //query传值接收方式 let {id,name} = this.$route.query; this.id = id; this.name = name; 所要跳转的路径： 1、 <div class="app"> <ul> <Router-link v-for="(item,index) in goods" :to="'/detail?id='+item.id+'&name='+item.goodsName" tag="li" > <h2>{{item.goodsName}}</h2> </Router-link> </ul> <router-view></router-view> </div> 2、 <div class="app"> <ul> <Router-link v-for="(item,index) in goods" :to="{name:'detail',query:{id:item.id,name:item.goodsName}}" tag="li" > <h2>{{item.goodsName}}</h2> </Router-link> </ul> <router-view></router-view> </div> 2、动态路径接收方式 在路由的配置项path中，设定传递参数的属性 方式为 /:属性..... 在路由跳转的属性中 设置属性的值 方式为 /detail/0/苹果 接收：this.$route.params router.js页面： { name:"detail", path:"/detail/:id/:name", component:Detail, } 传递参数地址页面： //动态路径接收方式 let {id,name} = this.$route.params; this.id = id; this.name = name; 所要跳转的路径： 1、 <div class="app"> <ul> <Router-link v-for="(item,index) in goods" :to="'/detail/'+item.id+'/'+item.goodsName" tag="li"> <h2>{{item.goodsName}}</h2> </Router-link> </ul> <router-view></router-view> </div> 2、 <div class="app"> <ul> <Router-link v-for="(item,index) in goods" :to="{name:'detail',params:{id:item.id+'',name:item.goodsName}}" tag="li"> <h2>{{item.goodsName}}</h2> </Router-link> </ul> <router-view></router-view> </div> 3、props接收方法 router.js页面： { name:"detail", path:"/detail/:id/:name", component:Detail, props:true, } 传递参数地址页面： props:{ id:{ type:String, default:"" }, name:{ type:String, default:"" } },
动态路由传值与query传值的区别：
query传值是非必须传值 动态路由传值是必须要传值
路由钩子函数 路由守卫：
beforRouteEnter 路由进入之前 1、热力图 2、登陆验证 3、权限验证 4、会员 VIP验证 5、验证商品携带信息是否完整 在当前钩子函数中是访问不到this的，因为还没有进入当前组件所以this为undefined 如果需要使用this则需要在next中使用回调,回调中的第一个参数就是组件的实例 进入路由之前 props:{ id:{ type:String, default:"" }, name:{ type:String, default:"" } } beforeRouteEnter(to,from,next){ //to 到哪里去 from 从哪来 next执行下一步 document.title = to.meta.title next((vm)=>{ console.log(vm); }); }, beforRouteUpdate 路由更新的时候 当路由发生了改变，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时 我们就需要用到了beforRouteUpdate props:{ id:{ type:String, default:"" }, name:{ type:String, default:"" } } beforeRouteUpdate (to,from,next) { //当路由发生改变的时候 console.log("执行了") this.id = to.params.id; this.name = to.params.name; next(); } beforRouteLeave 路由离开的时候 1、信息没有填写完成 2、答题系统 3、支付 4、退出登陆 当路由离开的时候 props:{ id:{ type:String, default:"" }, name:{ type:String, default:"" } } beforeRouteLeave(to,from,next){ var flag = window.confirm("您确定要离开吗?"); if(flag){ next(); } }
全局守卫 全局钩子函数：
beforEach 一般情况下用来做一些路由公众部分的验证 登陆验证 router.beforeEach((to, from, next) => { if(to.meta.requireAuth){ next(); }else{ if(getCookie("X-TOKEN")){ next() }else{ next("/login"); } } })
版权声明：本文为dongwei1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。