Vue 嵌套路由、路由守卫 程序员文章站 2023-12-31 14:24:34 嵌套路由 嵌套路由：一个路由配置中嵌套其他的路由配置。 嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的效果差不多。 demo 嵌套路由 <!DOCTYP ......</div> <div class="content"> <p> </p> <h3>嵌套路由</h3> <p>嵌套路由：一个路由配置中嵌套其他的路由配置。</p> <p>嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的<iframe>效果差不多。</p> <p> </p> <p> </p> <h4>demo 嵌套路由</h4> <div class="cnblogs_code"> <pre class="brush: javascript;"><!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> <!-- 引入路由插件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> <script> // 导航 var nav={ template:` <div> <router-link :to="{name:'nav.index'}">首页</router-link> <router-link :to="{name:'nav.article'}">文章</router-link> <router-link :to="{name:'nav.idea'}">想法</router-link> <router-link :to="{name:'nav.message'}">留言</router-link> <router-view></router-view> <!-- 留坑，点击上面4个路由链接，会在此处显示对应的页面 --> </div> `, } // 首页 var index={ template:` <div> <p>这是首页部分</p> </div> `, } // 文章 var article={ template:` <div> <p>这是文章部分</p> </div> `, } // 想法 var idea={ template:` <div> <p>这是想法部分</p> </div> `, } // 留言 var message={ template:` <div> <p>这是留言部分</p> </div> `, } // 安装路由插件 vue.use(vuerouter); // 创建路由对象 var router=new vuerouter({ // 配置路由规则 routes:[ {path:'/',name:'nav',component:nav,children:[ //path直接映射到根路径（当前html页面下）下，children配置要嵌套的路由,对象数组形式 {path:'/index',name:'nav.index',component:index}, //嵌套的路由的name里一般都要带上外部的路由容器，一看就知道关系 {path:'/article',name:'nav.article',component:article}, {path:'/idea',name:'nav.idea',component:idea}, {path:'/message',name:'nav.message',component:message}, {path:'',name:'nav.index',component:index}, //要点击nav中对应的链接才会路由到指定页面，我们给它配置一个默认的路由页面，path:'' ]}, ] }); new vue({ el:'#app', router, //使用路由 template:` <div> <router-view></router-view> <!-- 留给nav的坑位 --> </div> `, }) </script> </body> </html></pre> </div> <p> </p> <p> </p> <p>嵌套的路由的path可以使用相对路径、也可以使用绝对路径</p> <div class="cnblogs_code"> <pre class="brush: javascript;"> {path:'/nav',name:'nav',component:nav,children:[ {path:'/index',name:'nav.index',component:index} //绝对路径 ]}</pre> </div> <p>/表示根路径（当前html页面）。index的访问路径是.....html#/index</p> <p> </p> <div class="cnblogs_code"> <pre class="brush: javascript;"> {path:'/nav',name:'nav',component:nav,children:[ {path:'index',name:'nav.index',component:index} //相对路径，相对于外部路由 ]}</pre> </div> <p>index的访问路径是....html#/nav/index</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h3>路由守卫</h3> <p>一个页面路由到另一个页面，路由到目标页面之前可以做一些处理，比如登录检测、权限检查，不满足就不路由到目标页面，给出提示信息。</p> <p> </p> <h4>demo 路由守卫</h4> <div class="cnblogs_code"> <pre class="brush: javascript;"> // 安装路由插件 vue.use(vuerouter); // 创建路由对象 var router=new vuerouter({ // 配置路由规则 routes:[ //..... ] }); new vue({ el:'#app', template:` <div> <router-view></router-view> <!-- 留坑 --> </div> `, router, data(){ return{ //...... } }, mounted(){ router.beforeeach( (to,from)=>{ //路由守卫。使用es6的箭头函数做一些前处理。2个参数分别封装了目标页面、上一个页面的信息 //...... }); }, })</pre> </div> <p>路由守卫要写在html页面的new vue()中，一般是写在mouted(){ }中。</p> <p>上一个页面要传数据给目标页面，比如username、uid、loginstate、role什么的，可以在data中用一些变量保存这些数据，路由守卫根据这些数据进行登录检测、权限检测。</p> <p>执行到mouted()时，数据已经挂载，可以获取到数据，路由守卫可以拿到数据进行检测啦。</p> <p><span>beforeeach，顾名思义，每次路由到目标页面时，都会使用路由守卫进行检测。</span></p> <p> </p> <p>现在好多应用都是mvc模式，controller那里拦截器、过滤器什么的早就对请求进行了过滤，登录检测、权限检查已经做过了，在视图这里没必要再使用路由守卫来过滤。</p> <p>路由守卫用得很少，了解即可。</p> <p> </p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/.html"> </a> </p> <p> 下一篇： <a href="/article/.html"> </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2323073.html" target="_blank" title="Vue 嵌套路由、路由守卫"> <h2> Vue 嵌套路由、路由守卫 </h2> </a> </li> <li> <a href="/article/2322677.html" target="_blank" title="vue项目创建步骤 和 路由router知识点"> <h2> vue项目创建步骤 和 路由router知识点 </h2> </a> </li> <li> <a href="/article/2315800.html" target="_blank" title="vue二级路由设置方法"> <h2> vue二级路由设置方法 </h2> </a> </li> <li> <a href="/article/2312606.html" target="_blank" title="Angular路由——路由守卫"> <h2> Angular路由——路由守卫 </h2> </a> </li> <li> <a href="/article/2310121.html" target="_blank" title="vue3.0 CLI - 3.2 路由的初级使用教程"> <h2> vue3.0 CLI - 3.2 路由的初级使用教程 </h2> </a> </li> <li> <a href="/article/2305897.html" target="_blank" title="vue-router命名路由和编程式路由传参讲解"> <h2> vue-router命名路由和编程式路由传参讲解 </h2> </a> </li> <li> <a href="/article/2303298.html" target="_blank" title="vue路由传参的三种方式"> <h2> vue路由传参的三种方式 </h2> </a> </li> <li> <a href="/article/2301587.html" target="_blank" title="使用Vue动态设置路由参数"> <h2> 使用Vue动态设置路由参数 </h2> </a> </li> <li> <a href="/article/2294339.html" target="_blank" title="浅谈Vue.js路由管理器 Vue Router"> <h2> 浅谈Vue.js路由管理器 Vue Router </h2> </a> </li> <li> <a href="/article/2294174.html" target="_blank" title="vue如何实现监听路由的代码"> <h2> vue如何实现监听路由的代码 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>