首页 > 其他分享 >vue 主路由和子路由

vue 主路由和子路由

时间:2023-02-12 01:22:04浏览次数:56  
标签:about vue router 和子 按钮 home 路由

路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容。

路由中有三个基本的概念 route, routes, router。

1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。

2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。 路由占位符,可以实现侧边栏不动,只让中间的组件进行替换 <router-view/> 放在app.vue中 <router-view></router-view>      放在: 作用: 先放下,后面再来补充吧,目前的理解,是理解不了的 20230112   主路由 子路由   嵌套路由   参考文献:路由 router-view - byd张小伟 - 博客园 (cnblogs.com) 参考文献2:vue中router-view组件的使用详解_vue.js_脚本之家 (jb51.net)

标签:about,vue,router,和子,按钮,home,路由
From: https://www.cnblogs.com/mxleader/p/17113175.html

相关文章

  • SpringCloudGateway服务路由
    1使用1.1依赖首先要引入spring-cloud-starter-gateway的依赖:<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-sta......
  • vue学习
    推荐大家安装的VScode中的Vue插件Vue3Snippetshttps://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippetsVeturht......
  • vue2 data 一定要是函数吗?
    答:不一定,可以是对象,vue文档中表述有误导性而已,他自己的例子里也有对象的形式functioninitData(vm){letdata=vm.$options.datadata=vm._data=typeofdata......
  • Vue_Webpack
    前端工程化模块化(js复用)组件化(UI复用,layui)规范化(各种规范)自动化(自动构建、自动部署、自动化测试)前端工程化指的是:在企业级的前端项目开发中,把前端开发所......
  • Vue和React的区别
    Vue:Vue是一个用于Web构建的UI的渐进式框架。"渐进式框架"和"自底向上增量开发的设计"是Vue开发的两个概念。特点:易用,使用成本低;灵活,生态系统完善。React:React主张函数......
  • screenfull ==vue全屏功能
    1.importscreenfullfrom'screenfull'mounted(){this.screeninit()},beforeDestroy(){this.destroyscreen()},//处理......
  • 如何在H5页面或者移动端Uniapp/vue中接入在线客服系统,h5客服系统的接入方法
    通过嵌入JS代码的方式UniApp是一个使用Vue.js框架开发的跨平台应用程序,可以在iOS、Android、H5、微信小程序、支付宝小程序、字节跳动小程序等多个平台上运行。如果要......
  • 前端知识学习案例4-tailWind Css+vite2.0-添加Vue3.0
    vite2.0变成vite3.0   挂载vue组件  ......
  • 前端-vue基础96-vue router嵌套路由
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Documen......
  • 前端-vue基础96-路由重定向
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document<......