四，路由的传参和取值
查询参
配置。查询参可以和path属性匹配，也可以和name属性匹配。
<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>
或者
<router-link :to="{name:'login',query:{id:queryid}}"></router-link>
或者
this.$router.push({path:'/login',query:{id:queryid}});
取参
// 此代码可以写到组件的钩子函数中 this.$route.query.id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 头部 <router-link :to="{path:'login',query:{id:loginId}}">带参数登录</router-link> <router-link :to="{name:'person',query:{id:personId}}">带参数个人</router-link> <button @click="clxiaodao">带参数王导</button> <!-- 下面是路由出口 --> <router-view></router-view> 尾部 </div> </body> <script src="../Vue2/js/vue2.7.js"></script> <script src="../Vue2/js/vue-router.js"></script> <script> // 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 创建一个登录子组件 var login = { template:` <div> 登录页面 </div> `, mounted(){ console.log(this.$route.query.id); }, } // 创建一个登录子组件 var person = { template:` <div> 个人页面 </div> `, mounted(){ console.log(this.$route.query.id); }, } // 创建一个个人页面子组件 var xiaodao = { template:` <div> 王导页面 </div> `, mounted(){ console.log(this.$route.query.id); }, } // 创建路由配置实例，主要实现，路劲和子组件之间的映射 var myrouter = new VueRouter({ routes:[ {path:'/login',name:'login',component:login}, {path:'/person',name:'person',component:person}, {path:'/xiaodao',name:'xiaodao',component:xiaodao} ] }) var app = new Vue({ el:'#app', data(){ return{ loginId:1, personId:2, xiaodaoId:3 } }, router:myrouter, methods:{ clxiaodao(){ this.$router.push({ path:'/xiaodao',query:{id:this.xiaodaoId} }) }, } }) </script> </html>
路由参
配置路由规则
var router = new VueRouter({ routers:[ // 需要在配置路由规则时，使用冒号指定参数 {name:'login',path:'/login/:id',component:LoginVue} ] });
配置。意：在这里path和params两个参数不能同时使用
<router-link :to="{name:'login',params:{id:paramId}}"></router-link>
或者
this.$router.push({name:'login',params:{id:this.paramId}});
取参
this.$route.params.id;
注意：相同路由，但参数不同。造成页面不刷新的问题。
<router-view :key="$route.fullPath"></router-view>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 头部 <router-link :to="{name:'login',params:{id:loginId}}">路由登录</router-link> <router-link :to="{name:'person',params:{id:personId}}">路由个人</router-link> <button @click="apixiaodao">api路由 王导</button> <!-- 下面是路由出口 --> <router-view></router-view> 尾部 </div> </body> <script src="../Vue2/js/vue2.7.js"></script> <script src="../Vue2/js/vue-router.js"></script> <script> // 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 创建一个登录子组件 var login = { template:` <div> 登录页面 </div> `, mounted(){ console.log(this.$route.params.id); } } // 创建一个登录子组件 var person = { template:` <div> 个人页面 </div> `, mounted(){ console.log(this.$route.params.id); } } // 创建一个个人页面子组件 var xiaodao = { template:` <div> 王导页面 </div> `, mounted(){ console.log(this.$route.params.id); } } // 创建路由配置实例，主要实现，路劲和子组件之间的映射 var myrouter = new VueRouter({ routes:[ {path:'/login/id',name:'login',component:login}, {path:'/person/id',name:'person',component:person}, {path:'/xiaodao/id',name:'xiaodao',component:xiaodao} ] }) var app = new Vue({ el:'#app', data(){ return{ loginId:1, personId:2, xiaodaoId:3 } }, router:myrouter, methods:{ apixiaodao(){ this.$router.push({ name:'xiaodao',params:{id:this.xiaodaoId} }) } } }) </script> </html>
五，嵌套路由
1.路由间有层级关系。他们在模板中也有嵌套关系。
2.可以一次性配置多个路由。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-view :key="$route.fullPath"></router-view> </div> </body> <script src="../Vue2/js/vue2.7.js"></script> <script src="../Vue2/js/vue-router.js"></script> <script> // 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 导航子组件，一级路由 var nav = { template:` <div> <router-link :to="{name:'nav.index'}">首页</router-link> <router-link :to="{name:'nav.person'}">个人中心</router-link> <router-link :to="{name:'nav.message'}">消息</router-link> <router-view></router-view> </div> ` } // 首页子组件，二级路由 var index = { template:` <div> 首页 </div> ` } // 个人中心子组件，二级路由 var person = { template:` <div> 个人中心 </div> ` } // 消息子组件，二级路由 var message = { template:` <div> 消息 </div> ` } var router = new VueRouter({ routes:[ { path:'/nav/', name:'nav', component:nav, children:[ {path:'',redirect:'/nav/index'}, {path:'index',name:'nav.index',component:index}, {path:'person',name:'nav.person',component:person}, {path:'message',name:'nav.message',component:message}, ] }, { path:'', redirect:'/nav' } ] }) var app = new Vue({ el:'#app', router, }) </script> </html>
六，路由守卫
可以做验证判断
使用路由的钩子函数beforeEach实现
mounted(){ this.$router.beforeEach((to,from,next)=>{ console.log(to); if(to.path=='/index'){ next(); }else{ setTimeout(()=>{ next() },2000) } }) }
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-view :key="$route.fullPath"></router-view> </div> </body> <script src="../Vue2/js/vue2.7.js"></script> <script src="../Vue2/js/vue-router.js"></script> <script> // 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 导航子组件，一级路由 var nav = { template:` <div> <router-link :to="{name:'nav.index'}">首页</router-link> <router-link :to="{name:'nav.person'}">个人中心</router-link> <router-link :to="{name:'nav.message'}">消息</router-link> <router-view></router-view> </div> ` } // 首页子组件，二级路由 var index = { template:` <div> 首页 </div> ` } // 个人中心子组件，二级路由 var person = { template:` <div> 个人中心 </div> ` } // 消息子组件，二级路由 var message = { template:` <div> 消息 </div> ` } var router = new VueRouter({ routes:[ { path:'/nav/', name:'nav', component:nav, children:[ {path:'',redirect:'/nav/index'}, {path:'index',name:'nav.index',component:index}, {path:'person',name:'nav.person',component:person}, {path:'message',name:'nav.message',component:message}, ] }, { path:'', redirect:'/nav' } ] }) var app = new Vue({ el:'#app', router, mounted(){ this.$router.beforeEach((to,from,next)=>{ console.log(to); if(to.path=='/index'){ next(); }else{ setTimeout(()=>{ next() },2000) } }) } }) </script> </html>
最后
送大家一句话：半山腰总是挤的你要去山顶看看！！！
