位置: IT常识 - 正文

Vue--Router--嵌套路由(children)的用法(vue中$route)

编辑:rootadmin
Vue--Router--嵌套路由(children)的用法

推荐整理分享Vue--Router--嵌套路由(children)的用法(vue中$route),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuerouter嵌套路由怎么定义,vue router-view 嵌套 详细页,vuerouter嵌套路由怎么定义,vue router-view 嵌套 详细页,vuerouter嵌套子路的目的,vuerouter嵌套路由,vuerouter嵌套路由 为什么会导致页面缓存,vuerouter嵌套路由,内容如对您有帮助,希望把文章链接给更多的朋友!

原文网址:Vue--Router--嵌套路由(children)的用法_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍Vue Router的嵌套路由的用法。

        嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套。(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变)。

使用场景

        嵌套路由用于实现页中页效果。例如:

用户页面中,有登录页面和注册页面,这两个页面通过标签切换。此时:用户页面是父路由,登录和注册页面是子路由后台管理页面中,布局都是同一套,只是中间的内容部分改变。(例如:vue-element-admin)此时:整个布局是父路由,中间的内容页面是子路由。

官网网址

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

示例

需求:写一个用户页面,里边有登录页面和注册页面,这两个页面通过标签切换。

路由配置

router/index.js

import Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', redirect: User }, { path: '/user', name: 'User', component: User, children: [ { path: 'login', name: 'Login', component: Login }, { path: 'register', name: 'Register', component: Register } ] }]const router = new VueRouter({ routes})export default router用户页面(父页面)Vue--Router--嵌套路由(children)的用法(vue中$route)

User.vue

<template> <div class="outer"> <h2>这是用户页面</h2> <router-link :to="{name: 'Login'}">登录</router-link> | <router-link :to="{name: 'Register'}">注册</router-link> <router-view></router-view> </div></template><script>export default { name: 'User'}</script><style scoped>.outer { margin: 20px; border: 2px solid red; padding: 20px;}</style>登录页面(子页面)

Login.vue

<template> <div class="outer"> <h3>这是登录页面</h3> </div></template><script>export default { name: 'Login'}</script><style scoped>.outer { margin: 20px; border: 2px solid blue; padding: 20px;}</style>注册页面(子页面)

Register.vue

<template> <div class="outer"> <h3>这是注册页面</h3> </div></template><script>export default { name: 'Register'}</script><style scoped>.outer { margin: 20px; border: 2px solid blue; padding: 20px;}</style>测试

访问:http://192.168.0.104:8080/

结果:

点击“登录”/“注册”:

子路由的path前加“/”

        如果子路由的path的最前边有“/”,则不需要加父路由的路径即可访问此子组件。

例如,修改上边的“路由配置”,将path: 'login',改为path: '/login',则登录页面可以这样访问:

http://192.168.0.104:8080/#/login

示例

router/index.js:

import Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', redirect: User }, { path: '/user', name: 'User', component: User, children: [ { path: '/login', name: 'Login', component: Login }, { path: 'register', name: 'Register', component: Register } ] }]const router = new VueRouter({ routes})export default router

测试

本文链接地址:https://www.jiuchutong.com/zhishi/299887.html 转载请保留说明!

上一篇:二十场数学建模竞赛【详细思路+代码】总结(数学建模 比赛)

下一篇:2023 年8个ChatGPT 的替代品(2023年会出什么车)

  • bose无线蓝牙左耳不响(bose蓝牙左耳连不上)

    bose无线蓝牙左耳不响(bose蓝牙左耳连不上)

  • 快手直播的分是怎么来的

    快手直播的分是怎么来的

  • 充值的快币还能提现吗(充了的快币能不能退回来)

    充值的快币还能提现吗(充了的快币能不能退回来)

  • 苹果手机充80就不动了怎么办(苹果充到80%就没反应了)

    苹果手机充80就不动了怎么办(苹果充到80%就没反应了)

  • 手机12g运存有必要吗(手机12g运存有必要开内存融合吗)

    手机12g运存有必要吗(手机12g运存有必要开内存融合吗)

  • 动画启动方式有几种(动画启动方式怎么设置)

    动画启动方式有几种(动画启动方式怎么设置)

  • 向下填充快捷键excel(EXCEL表格向下填充快捷键)

    向下填充快捷键excel(EXCEL表格向下填充快捷键)

  • 计算机网络的基本功能(计算机网络的基本功能是什么)

    计算机网络的基本功能(计算机网络的基本功能是什么)

  • 华为nova7充满电要多久(华为nova7充满电会不会显示已充满)

    华为nova7充满电要多久(华为nova7充满电会不会显示已充满)

  • 苹果11掉漆可以换吗(苹果11掉漆可以免费维修吗)

    苹果11掉漆可以换吗(苹果11掉漆可以免费维修吗)

  • iphone录音可以合并吗(iphone录音可以拼接吗)

    iphone录音可以合并吗(iphone录音可以拼接吗)

  • 苹果11自带什么耳机(苹果11自带什么相机)

    苹果11自带什么耳机(苹果11自带什么相机)

  • 华为手机怎样召唤语音助手(华为手机怎样召唤小易)

    华为手机怎样召唤语音助手(华为手机怎样召唤小易)

  • 怎么通过支付宝查到住址(怎么通过支付宝查看对方电话)

    怎么通过支付宝查到住址(怎么通过支付宝查看对方电话)

  • 淘宝成就在哪里看(淘宝 成就)

    淘宝成就在哪里看(淘宝 成就)

  • vivo手机个人中心在哪(vivo手机个人中心怎么换手机号)

    vivo手机个人中心在哪(vivo手机个人中心怎么换手机号)

  • word如何加入密封线(怎么给word添加密码)

    word如何加入密封线(怎么给word添加密码)

  • 伪基站是什么

    伪基站是什么

  • 144hz用dp还是hdmi(144hz是接dp1.4还是hdmi2.0)

    144hz用dp还是hdmi(144hz是接dp1.4还是hdmi2.0)

  • 余额宝笔笔攒怎么取消(余额宝笔笔攒怎么冻结)

    余额宝笔笔攒怎么取消(余额宝笔笔攒怎么冻结)

  • 朋友圈怎么置顶第一条(朋友圈怎么置顶作品)

    朋友圈怎么置顶第一条(朋友圈怎么置顶作品)

  • 华为p30广角怎么用(华为p30pro广角)

    华为p30广角怎么用(华为p30pro广角)

  • 在win7系统中,本地组策略编辑器打不开怎么办?(在windows 7中)

    在win7系统中,本地组策略编辑器打不开怎么办?(在windows 7中)

  • 如何使用Windows 10系统自带的随意截图功能(如何使用windows的记事本创建文件)

    如何使用Windows 10系统自带的随意截图功能(如何使用windows的记事本创建文件)

  • 蝴蝶兰的养殖方法和注意事项 (图文)(蝴蝶兰的养殖方法和注意事项 盆栽蝴蝶兰烂根)

    蝴蝶兰的养殖方法和注意事项 (图文)(蝴蝶兰的养殖方法和注意事项 盆栽蝴蝶兰烂根)

  • Vue 3结合element plus(问题总结一)之 table数据更新而视图不跟新(vue3.0 element ui)

    Vue 3结合element plus(问题总结一)之 table数据更新而视图不跟新(vue3.0 element ui)

  • 机器学习中的数学——距离定义(八):余弦距离(Cosine Distance)

    机器学习中的数学——距离定义(八):余弦距离(Cosine Distance)

  • 承租方支付租房税费
  • 出口退税的条件有哪些
  • 自来水适用高税率吗
  • 土地使用权转让是什么意思
  • 独立核算与非独立核算区别
  • 银行入息是入几个月的
  • 现金流量表的期末数与资产负债表的货币资金吗
  • 资产损失原因
  • 地下车位未使用 要交物业服务费
  • 外购货物用于捐赠的会计分录
  • 为在建工程发生的管理费用
  • 在不同单位拿的工资怎么计税?
  • 文化事业建设费的征收范围
  • 简并税率后,申报增值税要注意哪几点?
  • 待认证进项税额是什么情况下用的
  • 餐饮企业员工
  • 无形资产原值增加,净值减少的原因
  • 天猫魔投安装教程
  • 软件登记费用
  • 补缴增值税和滞纳税区别
  • excel2019冻结
  • 浅谈特殊儿童的融合教育论文
  • 辅助生产成本是
  • win7系统文件在哪
  • 企业工资薪金和职工福利费等支出税前扣除问题的公告
  • 消防工程款支付方式
  • 10分钟学会万用表
  • 没有关系怎么表达
  • 这年头不好混图片
  • 前端cgi
  • 自建厂房流程
  • 用友重新安装步骤
  • github+hexo搭建博客
  • 小于500的费用没有发票怎么做账
  • 股东分红的会计分录怎么做
  • 营业额和营业收入怎么算
  • 百旺金赋怎么开红字发票
  • 应补退税额是什么意思 法律
  • MySQL数据库结构设计图
  • 母公司与子公司内部合作协议
  • 增值税一般纳税人是什么意思
  • 小规模纳税人专票税率是多少
  • 免交的增值税要交所得税吗
  • 主营业务成本如何设置明细
  • 工资表的重要性
  • 个体工商户怎样为员工缴纳社保
  • 小规模物业广告怎么写
  • 利润表季度申报本月金额却怎么填
  • 什么是企业合并的具体动因之一
  • 房屋装修费用的会计科目
  • 建账基本要求
  • 短期投资怎么记账
  • sap批量导入
  • 这么查看
  • 实用的银行转账怎么转
  • sql常用语句大全简书
  • win097
  • igfxsrvc module
  • win7系统u盘打不开怎么办
  • ubuntu20.04教程
  • win7系统打不开网络和共享中心
  • win8系统怎么重新安装系统
  • 找不到config/index taro
  • jQuery实现CheckBox全选、全不选功能
  • 如何强制和别人qq聊天
  • jq判断浏览器
  • linux shell 中 2>&1的含义
  • python3利用smtplib通过qq邮箱发送邮件方法示例
  • jQuery Ajax使用FormData对象上传文件的方法
  • 手把手教你打造一个花灯笼,老师看到肯定惊喜
  • json python 字段读取
  • python二分法查找
  • python设颜色代码
  • 自然人申报密码丢失如何找回
  • 医疗费发票查询
  • 河北电子税务局开票流程
  • 上海个体户纳税标准
  • 核定征收怎么计算税额
  • 2018年小微企业所得税优惠政策
  • 为什么国税网上申报不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设