三、Vue菜鸟小教程-嵌套路由、二级路由示例

最新推荐文章于 2024-06-07 08:25:57 发布
最新推荐文章于 2024-06-07 08:25:57 发布
阅读量1w 收藏 8
点赞数 2
分类专栏： Vue 文章标签： vue
本文是作者在学习Vue时撰写的嵌套路由和二级路由教程。通过阅读官方文档并实践，作者理解了$route.params.id的含义，并分享了相关程序示例，旨在帮助初学者快速掌握Vue的路由应用。
摘要由CSDN通过智能技术生成

     首先写这篇文章之前先声明一下，这篇文章是在空余时间写出来的，后期还会再往里面添加东西或者改动的，如果有哪里不对也欢迎指出。

     在学习过程中我都是先阅读一遍官方文档，然后看例子学的，因为个人觉得在做的过程中学习知识是比较快的。下面就遇到了这个问题，$route.parame.id是什么意思呢，在网上查了好多文档，了解到这些东西。下面先看一下程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>嵌套路由</title>
		<script src="vue.js"  type="text/javascript"></script>
		<script src="vue-router.js" type="text/javascript"></script>
		<!--首先引入vue和vue-router.js-->
		<style type="text/css">
			*{padding: 0px;margin: 0px;}
			li{list-style: none;float: left;margin: 10px 20px;}
			a{text-decoration: none;}
			a:hover{cursor: pointer;}
			.show{width: 300px;height: 300px;background: #ccc;float: left;margin: 20px 0px;}
			.clear{clear: both;}
		</style>
	</head>
	<body>
		
		<!--文档结
最低0.47元/天 解锁文章
爱上喝水的女孩
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router菜鸟进阶！(嵌套路由VS命名路由)
AprilCC的博客
11-09 2209
嵌套路由一个被渲染组件可以包含自己的嵌套< router-view >。要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置：<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></s
vue-路由精讲 二级路由和三级路由的作用
10-14
主要介绍了vue-路由精讲 二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue】面经基础版-二级路由配置
最新发布
qq_39921135的博客
06-07 289
配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件。当在页面中点击链接跳转，只是部分内容切换时，我们可以使用嵌套路由。二级路由也叫嵌套路由，当然也可以嵌套三级、四级…1.在一级路由下，配置children属性。技巧：二级路由应该配置到哪个一级路由下呢？二级路由的path不需要加。:一级的路由path 需要加。2.配置二级路由的出口。
vue简学之路（案例十四）二级路由配置
qq_44014971的博客
01-06 175
语法： 二级路由的配置，实现组件的嵌套 语法（ { path：’/news’,component:news, children:[ //二级路由，path分配，前面不要有！ { path:‘film’, component:{ template:’<.p>电视：人民的名义，河山<./p>’ } }, { path:‘tv’, component:{ template:’&l...
vue 路由嵌套(二级路由)
莹儿的博客
04-06 9389
路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法。 嵌套路由的关键字children，在父路由中添加children数组 中添加子路径 1. 下面我们先来看一下效果图 2. 首先我们如果想要使用路由的话必须要先引入vue.js和vue-router.js(src里的是我本地地址,大家根据需要替换不同路径)...
Vue中的多级路由（嵌套路由）
weixin_57375608的博客
11-01 557
多级路由（嵌套路由）
vue路由小demo
qq_39342918的博客
03-03 197
日常分享学习
Vue三层嵌套路由的示例代码
08-27
Vue 三层嵌套路由的示例代码 本篇文章主要介绍了 Vue 三层嵌套路由的示例代码，通过这个示例代码，我们可以学习如何在 Vue 中实现三层嵌套路由。下面，我们将逐步讲解这个示例代码的各个部分。 首先，我们需要了解...
解决vue-router 嵌套路由没反应的问题
10-14
在`route.js`中，我们定义了一个路由配置数组，其中包括一个根路由`/`，它有一个名为`App`的组件，并且拥有三个子路由：`/login`、`/class`和一个嵌套的`/course`。`/course`路由进一步包含两个子路由`/list`和`/...
在Vue中通过vue-router实现路由嵌套
01-08
如果对Vue的路由不太熟悉 请参看我的另一篇博客：Vue学习之旅Part9：使用vue-router实现前端路由和参数传递 路由嵌套 即路由的组件内部还有子组件 适用于很多业务场景 实现路由嵌套的步骤比较简单 首先 在路由对象里...
vue嵌套路由，二级路由使用介绍
Misnice的博客
08-14 5488
vue-router 嵌套路由，二级子路由 项目中如果都是一级路由，路由管理会有些乱。嵌套路由是路由中包含路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用<router-view>就可以了。 1.嵌套路由的使用场景 当项目中有选项卡时，切换选项卡按钮，页面中间部分的内容会变，但是选项卡按钮不会变；页面中间部分内容的变化就可以通过二级子路由实现，中间部分显示的内容就是二级子路由的内容
Vue二级路由、路由模式、路由守卫、路由懒加载使用方式与事例
m0_63851202的博客
01-24 652
二级路由 路由配置 ｛ path:"/goods", component:Goods, children:[ { path:"/new", component:New }, { path:"/3c", ...
嵌套路由写法
liuhongboke的博客
07-27 287
然后创建一个films文件夹，在下面放两个子页面（这里这两个页面相当于孩子页面）这里主要还是嵌套路由的一个写法，具体功能可以自己去写一下。children子页面，孩子。首先创建一个films页面。redirect重定向。......
嵌套路由又称子路由哦！
hangnan315的博客
07-25 1031
嵌套路由 嵌套路由又叫子路由，实现相关路由组件在某个路由组件的 router-view 中渲染，而不是在 app 的 router-view 中渲染 children 嵌套路由的配置使用 children 属性 children中的定义方式，和routes一致 { path: "", component: Component, children: [ { path, component } ] } ！！！！！！注意！！！！！！ 子路由的 component 会被
基础：vue-router实现子路由
qq_38349067的博客
05-27 375
//index.js import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import First from '@/components/first' import A from '@/components/A' import B from '@/components/B' import A1 from '@/components/A1' import .
Vue2-初识路由、路由分类、路由的基本使用、嵌套（多级）路由、路由的query参数、路由的params参数、路由的props配置
weixin_56498069的博客
08-29 569
Vue2-初识路由、路由分类、路由的基本使用、嵌套（多级）路由、路由的query参数、路由的params参数、路由的props配置
通过vue快速搭建，创建子路由
wangzhen12138的博客
07-30 1775
继续上文中我们完成了一个由pageone和pagetwo的路由搭建 具体的上文请打开https://blog.csdn.net/wangzhen12138/article/details/119250222查看 如图上所示那么我们将在页面二中创造出三个子页面，方法如下 首先在我们vuecli文件中的views文件中创建ChildOne.vue\ChildTwo.vue\ChildThree.vue三个文件 最好用我们的驼峰命名法 代码如下所示 如下是我们的childone代码段 ...
vue子路由小实例
前端学习笔记
05-11 1173
#vue子路由小实例(如有错误或更好写法还请指正) 实现效果 上代码 <template> <section id="childrenRouterPratice"> <section class="box"> <section class="box-title"> <div clas...
Vue前端路由
编程菜鸟
03-22 1944
路由概念 SPA(单页面应用程序) 中，前端路由（router）就是对应关系。（Hash地址与组件间对应关系） 工作方式： 用户点击页面上的路由链接 导致URL地址栏中Hash值发生变化 前端路由监听到Hash地址变化 前端路由把当前Hash地址对应组件渲染到浏览器中 vue-router 基本用法 vue-router 是vue.js 官方的 路由解决方案。管理SPA项目中组件切换 官方地址：Vue Router ① 安装 vue-router 包 命令：npm i vue-ro.
vue-router嵌套路由
09-01
Vue Router 是一个官方提供的 Vue.js 的路由管理器，可以用于构建单页面应用程序。嵌套路由是指在一个路由的组件中使用另一个路由。 在 Vue Router 中，可以通过在路由配置文件中定义嵌套路由。嵌套路由的配置是以树形结构来组织的，父级路由将会嵌套渲染其子路由的组件。 下面是一个示例的路由配置文件，演示了如何使用嵌套路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home, children: [ { path: '', component: Dashboard }, { path: 'about', component: About }, { path: 'products', component: Products, children: [ { path: '', component: ProductList }, { path: ':id', component: ProductDetail } ] } ] } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中，父级路由 '/' 下包含了三个子路由：Dashboard、About 和 Products。而 Products 路由又包含了两个子路由：ProductList 和 ProductDetail。 在组件中使用嵌套路由时，需要在父级组件中使用 `<router-view>` 标签来渲染子路由的内容。 ```html <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` 在父级组件的模板中，通过使用 `<router-view>` 标签，子路由的内容将会被渲染在这个位置。 这就是 Vue Router 中嵌套路由的基本使用方法。通过嵌套路由，可以更好地组织和管理应用程序的路由结构，实现更复杂的页面布局和导航功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值