vue.js 二级路由/三级路由

为什么要用二级和三级路由？

当项目中有多个 <router-view> 时，就必须使用分级路由；

如果路由不分级，又有多个 <router-view> ,全部都是定义为一级路由，那么项目中的 <router-view> 的内容显示就会混乱；这是不友好的；

如果对路由进行分级，那么当触发某个二级或三级路由时，此路由就会将对应组件内容传给自己的父级路由组件里面的 <router-view>，这样就不会混乱；

一级路由被触发时，自然会找自己所注册的根组件的<router-view>

二级路由

为一级路由添加一个 children 属性数组，并将二级路由放入；

path 属性决定跳转后 url 地址栏的的显示

//main.js
//一级路由
import About from './components/about/About'//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'const router= new VueRouter({routes:[{path:'/about',name:'about',component:About,children:[{path:'/about/contsssssssssssssssact',name:'contactLink',component:Contact},{path:'/history',name:'historyLink',component:History},{path:'/',name:'deliveryLink',component:Delivery},{path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},]},{path:'*',redirect:'/'}],mode:"history"
});

三级路由

和二级路由差不多

const router= new VueRouter({routes:[{path:'/',name:'home',component:Home},{path:'/menu',name:'menu',component:Menu},{path:'/admin',name:'admin',component:Admin},{path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[   //二级路由{path:'/about/contact',name:'contactLink',component:Contact},{path:'/history',name:'historyLink',component:History},{path:'/delivery',name:'deliveryLink',component:Delivery},{path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [  //三级路由{path:'/phone',name:'phonelink',component:Phone},{path:'/name',name:'namelink',component:Name}]},]},{path:'/login',name:'login',component:Login},{path:'/register',name:'register',component:Register},{path:'*',redirect:'/'}],mode:"history"
});

如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈

vue.js 二级路由/三级路由相关推荐

vue.js建立主页的路由 - 另类的实现方式
注释部分,仅供参考代码如下: // src/router/index.js 相关配置import Vue from 'vue' import Router from 'vue-router' imp ...
vue打开二级或者三级页面传输对象，再刷新浏览器数据丢失问题解决（vue使用router传递数据）
vue使用router进行跳转如果只是单纯的URL跳转的话,直接指定path就可以了 this.$router.push({path:'whiteList'}}); 如果需要使用router进行单纯 ...
vue学习 32路由精讲之二级路由和三级路由
分级时,默认打开指定下级的路由,使用redirect属性,其值为子级路由的路径path. 子级使用属性children: 值为数组,数组中每个元素都是一个路由对象二级路由在main.js中配置路由 ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
【vue.js】vue后台项目权限功能实现思路
常见的后台系统中,会存在不同的用户角色,如超级管理员.普通用户,这些用户角色的权限是不同的,所以可以操作或显示的模块也不一致.这里采用如下后台管理系统框架作为模板地址:https://github. ...
sau交流学习社区--songEagle开发系列：Vue.js + Koa.js项目中使用JWT认证
一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的 ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由首先需要让二级路由和三级路由平级,也就是把二级路由也在三级路由里面, 让二级路由去重定向到三级路由 component写成一个方法来 ...
vue 路由二级跳转三级路由,路径变化页面没变
记录下路由跳转,二级路由跳转到三级路由(hidden为true)路径变化页面没变比如账号列表(二级路由)跳转到账号详情(三级路由) routes的index页面,已设置details页面为hidde ...

vue.js 二级路由/三级路由

二级路由

三级路由

vue.js 二级路由/三级路由相关推荐

最新文章

热门文章