vue-router实现嵌套路由的讲解
一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由)
需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的
嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现;子路由的内容进行切换,地址栏的路径也随之改变。
// 嵌套路由 { path: '/nest', component: () => import('@/nest/nest'), // 嵌套路由的关键字children,在父路由中添加children数组 中添加子路径 children:[ { // 要注意,以 / 开头的嵌套路径会被当作根路径,这让你充分的使用嵌套组件而无须设置嵌套的路径。如果这里的path的值为'/son1将无法渲染son1子组件' path: 'son1', component: () => import('@/nest/nest_son1') }, ] }
上面子路由中加不加‘/' 的区别:当去到son1的时候加 ‘/'会在地址栏中显示 #/son1;不加 ‘/'的时候回在地址栏中显示 #/nest/son1
注意:/xx就是根路径
效果:
若有不足请多多指教!希望给您带来帮助!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接
相关推荐
-
vue-router命名路由和编程式路由传参讲解
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 重点代码: 效果: 若有不足请多多指教!希望给您带来帮助! 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接
-
vue中过滤器filter的讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
-
Vue 中使用vue2-highcharts实现top功能的示例
1.要实现的效果如下图: 2.首先项目中引用vue2-highcharts package.json中如下: 在命令行中输入: cnpm install vue2-highcharts 3.页面代码如下: <template> <div > <div> <div id="transparent-header" class="rank-head container" > <img src="../asse
-
在vue项目中引入highcharts图表的方法
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="chart" id="myChart" > <div class="emcs_charts" :id="id" ></div&
-
vue计算属性computed、事件、监听器watch的使用讲解
一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据
-
在Vue中使用highCharts绘制3d饼图的方法
highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法. 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts,我们还需要安装后者 npm install highcharts
-
vue-router实现编程式导航的代码实例
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.即:通过js动态的进行导航链接. 一.this.$router.push( ) router.push(location, onComplete?, onAbort?) 注意:在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push. 想要导航到不同的 URL,则使用 router.push 方法.这个方法会
-
vue-router传参用法详解
一.动态路径参数 以冒号开头(这种传参的方式会将传的值暴露在地址栏中:$route.params进行接收) 当to后面跟的是其他拼凑出来的值需要给t让to变为属性的方式传参即:to =' ' 效果: 二.get的方式进行传参(这种传参的方式相当于在地址栏?参数=值:$route.query进行接收) 效果: 若有不足请多多指教!希望给您带来帮助! 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面
-
Vue 中使用vue2-highcharts实现曲线数据展示的方法
1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l
-
在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa
随机推荐
- AngularJS实现进度条功能示例
- 在Ubuntu上面安装VMware Workstation教程
- jQuery实现微信长按识别二维码功能
- iOS发送短信功能的实现代码
- Python使用代理抓取网站图片(多线程)
- 使用xenocode代码混淆加密的操作步骤
- javascript类型系统 Array对象学习笔记
- 零基础写python爬虫之urllib2使用指南
- C#中的委托、事件学习笔记
- mysql中insert与select的嵌套使用解决组合字段插入问题
- PHP多文件上传实例
- Ajax结合php实现二级联动
- mysql不重启的情况下修改参数变量
- MySQL中二进制与重做日志文件的基本概念学习教程
- Android中自定义ImageView添加文字设置按下效果详解
- jQuery实现查找链接文字替换属性的方法
- 老生常谈JavaScript数组的用法
- JS组件Bootstrap导航条使用方法详解
- Spring Boot中使用 Spring Security 构建权限系统的示例代码
- 对PHP PDO的一些认识小结