vue-router 三级路由

1.home.vue

<template><div class="nav">一级路由首页<router-link class="nav-item" to="/TestEvaluation">测试评估</router-link><router-link class="nav-item" to="/ParameterManage">参数管理</router-link><router-link class="nav-item" to="/ProgramManage">方案管理</router-link><router-link class="nav-item" to="/AuthorityManage">权限管理</router-link><router-view></router-view></div>
</template>

2.index.vue

<template><div><h2>这是二级路由首页</h2><div class="test-evaluation"><div class="left-nav"><LeftNav></LeftNav></div><router-view></router-view><router-view name="helper" /></div></div>
</template>
<script>
import LeftNav from './LeftNav/LeftNav.vue';
export default {name: 'TestEvaluation',components: { LeftNav },data() {return {};}
};
</script>

3.LeftNav.vue

<template><div class="left-nav"><router-link class="nav-item" to="/TestEvaluation/ModelTest">模型测试</router-link><br /><router-link class="nav-item" to="/TestEvaluation/DataManage">数据管理</router-link></div>
</template>

4.router/index.ts

const routes = [{path: '/',component: home,children: [{path: 'TestEvaluation', //这里路径为/TestEvaluationcomponent: index,children: [{path: 'DataManage', //这里路径为/TestEvaluation/DataManagecomponent: DataManage},{path: 'ModelTest', //这里路径为/TestEvaluation/ModelTestcomponents: {default: ModelTest,helper: modeltest2}}]}]}
];

运行效果：
一级：

二级：

三级：

vue-router 三级路由相关推荐

Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue 动态显示三级路由
无需 vuex.本地存储实现动态显示三级路由. 目录一.需求描述: 二.代码 2.1 路由配置 1. 我的一级菜单和二级菜单的路由配置的: 2. 三级菜单的路由配置: 3. 上面有几个变量和要注意的 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
vue——router更改路由地址，但是页面不能跳转
在做电商项目时,筛选标签时,需要路由发生变化,但是当前的页面商品列表还需要局部刷新. 如果更改路由后,页面跳转,则是全局刷新,局部刷新才能够满足用户需求. 则此时要做的就是:更改路由地址,但是页面不能 ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...

vue-router 三级路由

vue-router 三级路由相关推荐

最新文章

热门文章