vue 二级三级路由配置

最终效果：

二级嵌套三级index.js页面路由配置：

二级：在所在页面路由对象里，加children:[继续配置路径]，页面path可以自己定义

三级：和二级一样

 {path: '/about',name: 'about',component: about,redirect: '/about/home',children: [{path: '/about/home',name: 'home',component: home,},{path: '/about/news',name: 'news',component: news},{path: '/about/project',name: 'project',component: project},{path: '/about/user',name: 'user',component: user,children: [{path: '/myphone', name: myphone, component: myphone},{path: '/myname', name: myname, component: myname},]},]},

二级跳转html代码：

        <router-link to="/Baidusearch" class="navbar-brand">百度搜索</router-link><ul class="navbar-nav"><li><router-link to="/game" class="nav-link">游戏</router-link></li><li><router-link to="/Tab" class="nav-link">选项卡</router-link></li><li><router-link to="/shopcar3" class="nav-link">购物车</router-link></li><li><router-link to="/about" class="nav-link">about</router-link></li></ul><ul class="navbar-nav ml-auto"><li><router-link to="/linklogin" class="nav-link">登陆</router-link></li><li><router-link to="/register" class="nav-link">注册</router-link></li></ul>

三级跳转html代码：

           <router-link tag="li" class="nav-link" to="/about/home"><a class="list-group-item list-group-item-action">爱的小屋</a></router-link><router-link tag="li" class="nav-link" to="/about/news"><a class="list-group-item list-group-item-action">个人新闻</a></router-link><router-link tag="li" class="nav-link" to="/about/project"><a class="list-group-item list-group-item-action">我的项目</a></router-link><router-link tag="li" class="nav-link" to="/about/user"><a class="list-group-item list-group-item-action">个人信息</a></router-link>

vue 二级三级路由配置相关推荐

VUE二级/多级路由配置方式（嵌套路由）
二级路由中path写法不同对应router-link标签to属性的不同写法二级路由配置path:"/XXX",path中带/ ,则对应的路由导航router-link中的to属性 ...
vue 动态显示三级路由
无需 vuex.本地存储实现动态显示三级路由. 目录一.需求描述: 二.代码 2.1 路由配置 1. 我的一级菜单和二级菜单的路由配置的: 2. 三级菜单的路由配置: 3. 上面有几个变量和要注意的 ...
X-Space二级(三级)域名配置
大家好,下面是由laimingzhen和bc520共同为你录制的关于XSPACE在IIS二级(三级)域名的配置,本次录制操作环境为WINDOWS2003+IIS6+MYSQL5.0.22+php5.1 ...
Django二级域名路由配置方案django-hosts
最终效果 http://www.mydomain.cn/api/ --> http://api.mydomain.cn/ http://www.mydomain.cn/blog/ --> ...
vue学习 32路由精讲之二级路由和三级路由
分级时,默认打开指定下级的路由,使用redirect属性,其值为子级路由的路径path. 子级使用属性children: 值为数组,数组中每个元素都是一个路由对象二级路由在main.js中配置路由 ...
Vue 路由配置和二级路由配置
Vue 路由配置和二级路由配置路由配置二级路由默认首个页面二级路由导致一级路由下的高亮失效路由配置我们初始化我们的Vue项目后,打开工程目录src/router下的index.js.我们可 ...
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由首先需要让二级路由和三级路由平级,也就是把二级路由也在三级路由里面, 让二级路由去重定向到三级路由 component写成一个方法来 ...
vue.js 二级路由/三级路由
为什么要用二级和三级路由? 当项目中有多个 <router-view> 时,就必须使用分级路由: 如果路由不分级,又有多个 <router-view> ,全部都是定义为一级路 ...
vue 路由二级跳转三级路由,路径变化页面没变
记录下路由跳转,二级路由跳转到三级路由(hidden为true)路径变化页面没变比如账号列表(二级路由)跳转到账号详情(三级路由) routes的index页面,已设置details页面为hidde ...
react二级路由配置正确不显示页面的问题解决
react二级路由配置正确不显示页面的问题解决最近在写react项目,配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解.直到第二天豁然开朗,才发觉就这?? 问题描 ...

vue 二级三级路由配置

最终效果：

二级嵌套三级index.js页面路由配置：

二级跳转html代码：

三级跳转html代码：

vue 二级三级路由配置相关推荐

最新文章

热门文章