Vue router内调用组件（嵌套router）

最新推荐文章于 2023-02-28 15:06:07 发布

张云帆Snapic

最新推荐文章于 2023-02-28 15:06:07 发布

阅读量342

点赞数

分类专栏：学习记录总结文章标签： vue

本文链接：https://blog.csdn.net/Z_Y_F520/article/details/107558006

版权

本教程介绍了如何在Vue Router中进行组件嵌套和路由配置。首先，在components文件夹创建Text1、Text2、Text3三个组件。接着，在router.js导入这些组件，并在routes配置中使用children属性实现路由嵌套。最后，通过浏览器展示嵌套路由的效果。

摘要由CSDN通过智能技术生成

本教程在上一篇Vue router使用方法的基础上进行

Vue router使用方法

1、在components文件夹中新建三个组件Text1、Text2、Text3
在这里插入图片描述
2、在router.js中引入组件

import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'

3、在routes内嵌套children

children: [{
   
                    path: '/',
                    redirect

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

张云帆Snapic

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue-router单页应用，以及组件之间的嵌套使用

qq_44361433的博客

04-12

307

通过一个实例来展示vue-router和嵌套的使用 <body> <div id="app"> <router-view></router-view> </div> <script src="../js/vue.min.js"></script> <script src="../js/vue-rout...

Vue路由组件按需加载的几种方法

weixin_34149796的博客

03-13

255

1. 普通加载使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如： import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 复制代码这样做的结果就是webpack在npm ...

参与评论您还未登录，请先登录后发表或查看评论

vue中vue-router的使用方法

weixin_42289273的博客

03-08

584

路由中有三个基本的概念 route, routes, router。　1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。　2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}] 　3， router 是一个机制，相当于一个管理..

vue-router的路由嵌套

chu_geng的博客

09-26

151

路劲嵌套 /miaov/ketang 路由配置嵌套 { path:'/miaov', name:'miaov', //有了默认的二级路径不需要父级设置name redirect:{name:'miaov-ketang'}//没有默认的子路径配置，可以使用重定向打开miaov就到ketang 注：如果有默认的二级路径就不可以了 children:[ ...

vue中调用方法时传参_新手使用vue-router传参时注意事项

weixin_39594191的博客

12-18

459

1. 使用name和params组合传参this.$router.push({name: 'details', params: {'id': 233}})路由配置import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({mode: 'history',routes: [...

router的使用

m0_57479235的博客

05-18

1151

router-link 特性默认是会被渲染成a标签可以用tag属性修改属性值 to属性跳转到哪个页面和path对应（相当于执行一次this.$router.push(’/name’)） replace属性，不需要写值，让页面不可回退，默认是push属性 active-class用于修改单个class属性 tag渲染成什么元素 router-view router-view决定渲染组件位置 routes简单语法【注意】：不要忘记引入组件 const routes = [ { pa

VueRouter按需加载

qq_39914739的博客

11-11

419

如果router.js中全部都使用下面这种方式引入路由组件，那么所有组件都打包在一个js中，导致进入首页时，加载时间相对过长。那么如何优化性能呢？我们可以使用以下两种方式：（1）使用require这种方式，只有访问这个路由时才会加载这个js.即就是把路由组件分别打包成不同的js，需要才加载。（2）使用syntax-dynamic-import，但是必须先安装，因为import是es7语法。 cnpm install --save-dev @babel/plugin-syntax-dynam

浅谈vue-router路由切换组件重用挖下的坑

12-13

问题描述：vue-router导航切换时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新翻车现场再现：这是我的/router/index.js 的...

vueRouter 重定向高亮传参嵌套简单示例

paidaboluo的博客

08-08

404

vueRouter 重定向高亮传参嵌套简单示例

vue router 组件的高级应用实例代码

10-17

除了以上提到的高级应用，Vue Router 还支持其他功能，如命名路由、动态路由匹配、嵌套路由、懒加载等，这些都可以极大地增强应用的灵活性和可维护性。正确使用Vue Router的高级特性，可以帮助开发者构建出更加高效...

Vue.js路由组件vue-router使用方法详解

10-20

使用时，需要先引入VueRouter，然后调用Vue.use(VueRouter)来注册路由功能。这些知识点覆盖了从vue-router的基本使用到项目中的实践应用。掌握了这些内容，可以帮助开发者更有效地使用Vue.js结合vue-router开发出...

vue中路由按需加载的几种方式

XYLH2015的博客

04-27

246

使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如： import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 普通加载的缺点： webpack在打包的时候会把整...

vue -vue-router.js+children实现路由嵌套

qq_42039912的博客

07-18

461

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.

vue项目实现路由按需加载（路由懒加载）的三种方式

一个前端开发者

07-11

4666

这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载，方法有三种：vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。举例如下： 2. es6提案的import() 推荐使用这种方式(需要webpack > 2.4) webpack官方文档：webpac

【VUE】五 vue-router组件

春天的波菜

02-28

350

vue +。单页面应用，简而言之就是项目只有一个页面。一个页面如何呈现多种界面的效果呢？基于vue开发多个组件，例如：活动组件、课程组件、咨询组件在页面上 vue-router 用来管理这些组件，用户点击某个按钮，就显示特定的组件（数据基于Ajax获取）。

Vue-router路由组件的使用方法(基础且重要)

m0_51972565的博客

07-23

2269

在学习了vue-router组件之后总结的基础用法路由的创建与配置，路由规则的编写，路由组件的访问，参数的传递，路由的生命周期函数，路由守卫的方法和作用…等等常用的知识

vue2.x跨组件调用router-view组件内的函数的方法

silent_missile的博客

06-07

7824

在上一篇 https://blog.csdn.net/silent_missile/article/details/91128221 介绍了如何跨组件，由激发组件通过emit事件，再通过父组件转发到目标组件来调用但是如果目标组件是router-view组件，使用方法就有所不同了，因为router-view组件是会随着路由地址改变而改变的其实调用的方法很简单，就是在router-view...

注册会计师会计第十五章债务重组.doc