嵌套路由

有时候在路由中,主要的部分是相同的,但是下面可能是不同的。比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message。这时候就需要使用到嵌套路由。项目结构如下:



我们创建了3个组件,分别是Home.vueHomeNews.vueHomeMessage.vue,代码如下:

Home.vue

<template>
<div class="home">
<h1>Home</h1>
<router-link to="/home/news">新闻类</router-link> // 注意这里一定要写完整路径不能只写/news,需要加上/home
<router-link to="/home/message">信息类</router-link>
<router-view></router-view>
</div>
</template> <script> export default {
name: "Home",
};
</script> <style scoped> </style>

HomeNews

<template>
<div class="homeNews">
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
</ul>
</div>
</template> <script>
export default {
name: "HomeNews"
}
</script> <style scoped> </style>

HomeMessage

<template>
<div class="homeMessage">
<ul>
<li>消息1</li>
<li>消息2</li>
<li>消息3</li>
<li>消息4</li>
</ul>
</div>
</template> <script>
export default {
name: "HomeMessage"
}
</script> <style scoped> </style>

组件写完以后,我们在router文件夹下的index.js文件中配置路由

import Vue from "vue";
import VueRouter from "vue-router"; Vue.use(VueRouter); // 这里还是使用路由懒加载
const Home = () => import('../views/Home')
const HomeNews = () => import('../views/HomeNews')
const HomeMessage = () => import('../views/HomeMessage') const routes = [
{
path: "/home",
name: "Home",
component: Home,
// 子路由的写法
children: [
{
path: "news",
name: "HomeNews",
component: HomeNews
},
{
path: "message",
name: "HomeMessage",
component: HomeMessage
},
]
},
{
path: "",
redirect: "home"
}
]; const router = new VueRouter({
routes,
mode: 'history',
}); export default router;

嵌套路由的写法很简单,你会发现,children 配置就是像 routes 配置一样的路由配置数组,所以呢,你可以嵌套多层路由。

此时,基于上面的配置,当你访问 /home/时,home 的出口是不会渲染任何东西。

这是因为没有匹配到合适的子路由。如果你想要渲染点什么,可以提供一个 空的 子路由:

const routes = [
{
path: "/home",
name: "Home",
component: Home,
children: [
{
path: "news",
name: "HomeNews",
component: HomeNews
},
{
path: "message",
name: "HomeMessage",
component: HomeMessage
},
// 新增空的子路由
{
path: "",
redirect: "news"
}
]
}, {
path: "",
redirect: "home"
}
];

这样页面就默认会重定向到news页面,会展示news的信息

vue(19)嵌套路由的更多相关文章

  1. vue.js嵌套路由-------由浅入深

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...

  2. VUE中嵌套路由

    官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...

  3. [Vue]vue-router嵌套路由(子路由)

    总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...

  4. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  5. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  6. VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

    一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...

  7. vue嵌套路由--params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...

  8. vue嵌套路由总结

    嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...

  9. VUE router-view 页面布局 (嵌套路由+命名视图)

    嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...

随机推荐

  1. 摄像头定位:ICCV2019论文解析

    摄像头定位:ICCV2019论文解析 SANet: Scene Agnostic Network for Camera Localization 论文链接: http://openaccess.the ...

  2. 如何写新的C++ OP

    如何写新的C++ OP 概念简介 简单介绍需要用到基类,详细介绍请参考设计文档. framework::OperatorBase: Operator(简写,Op)基类. framework::OpKe ...

  3. 接触追踪解决方案建立在UWB而不是蓝牙上

    接触追踪解决方案建立在UWB而不是蓝牙上 Contact tracing solution builds on UWB rather than Bluetooth 几个月前,当社会距离明显成为对抗CO ...

  4. OSPF-三张表+路由器角色+router-id

    验证理论: 1.剖析OSPF的三张表:邻居表,拓扑表,路由表 dis ospf peer brief dis ospf lsdb dis ip routing-table protocol ospf ...

  5. selenium-python元素定位技巧(二)

    在python-selenium元素定位中,有很多小技巧,在此记录总结  技巧一.有关联关系的元素有交集关系时,必须添加固定等待,整体调试时候也适当增加固定等待,保持代码运行稳定性.下拉的时候选择下拉 ...

  6. MySQL 主从复制&读写分离 简介

    1. 读写分离&读写分离 简介 主从同步延迟 分配机制 解决单点故障 总结 2. 主从复制&读写分离 搭建 搭建主从复制(双主) 搭建读写分离 1. 读写分离&读写分离 简介 ...

  7. Spring Cloud03: Eureka Client 服务提供者

    一.创建一个子工程并引入配置如下: <dependency> <groupId>org.springframework.cloud</groupId> <ar ...

  8. (3)虚拟Web主机

    虚拟Web主机 作用:让一台Web服务器,提供多个页面 搭建方式: 1.基于域名的虚拟Web 2.基于端口的虚拟Web 3.基于IP地址的虚拟Web ######################### ...

  9. 【NX二次开发】判断部件是否已修改(判断部件是否需要保存)UF_PART_is_modified();

    判断部件是否已修改(判断部件是否需要保存)UF_PART_is_modified(); 注意:函数需要输入原型,不要输入事例.事例转原型:UF_ASSEM_ask_prototype_of_occ() ...

  10. 【SQLite】教程03-SQLite语法

    注释: sqlite>.help -- 这是一个简单的注释 SQLite ANALYZE 语句: 收集有关表和索引的统计信息,并将收集的信息存储在数据库的内部表中 ANALYZE; or ANA ...