vue中的router-view组件的使用教程


Posted in Javascript onOctober 23, 2018

开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。

比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件,我们通过<router-view></router-view>

<template>
 <div class="navbar">
 <ul id="main">
 <li><router-link to="/food" >商品</router-link></li>
 <li><router-link to="/rating">评价</router-link></li>
 <li><router-link to="/seller">商家</router-link></li>
 </ul>
   <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view></router-view>
 </div>
</template>

显示粗来的navbar就是这样的,在同个页面显示,地址栏也是变的, 我们在index这个组件引入navbar组件,头部那些不相干的logo啊基本信息可以忽略一下下

vue中的router-view组件的使用教程

那么他们的路由都是怎么配的呢,在index.js中:

{
  path: '/',
  name: 'index',
  component: index,
  redirect:'/food',
  children:[
 {
  path: 'food',
  name: 'food',
  component: food
 },
 {
  path: 'seller',
  name: 'seller',
  component: seller
 },
 {
  path: 'rating',
  name: 'rating',
  component: rating
 }
  ]
 },

多加张图解释一下哈

vue中的router-view组件的使用教程

上张图片注释的单词打错了,是“index”,不是“iindex”,个最后顺便附上index.vue的代码,这样好理解一点

<template>
 <div class="index">
 <div class="nav"></div>
 <div class="shop-header">
 <div class="imgbox"><img src="../../static/img/56.jpg" alt="" /></div>
 <h2>黄蜀?鸡公煲<span class="ico"></span></h2>
 <p class="info1"><span>*4.6</span><span>月售738</span><span>商家配送约44分钟</span><span>距离345m</span></p>
 <p class="info2">店内免费涮煲,(蔬菜、小料、主食、糕点、凉菜、水果、免费吃)闻香识辣,入口知麻,一锅两吃,独具特色!!!外卖米饭请自点!!评价问题商家会一一看,可能不能及时回复。有问题详询18232966036</p>
 </div>
 <navbar></navbar>
 </div>
</template>
<script>
import navbar from '@/components/navbar'
 import food from '@/components/food'
 export default {
 name: 'HelloWorld',
 data() {
 return {
 
 msg:[]
 }
 },
 components: {
 navbar
 
 }
 }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
 @import '../../static/css/index.styl';
</style>

总结

以上所述是小编给大家介绍的vue中的router-view组件的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 #Javascript
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 #Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 #Javascript
React 路由懒加载的几种实现方案
Oct 23 #Javascript
You might like
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python动态视频下载器的实现方法
2019/09/16 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
应届生保险求职信
2013/11/11 职场文书
专业销售业务员求职信
2013/11/18 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
董事长助理岗位职责
2014/02/18 职场文书
实习评语大全
2014/04/26 职场文书
三严三实对照检查材料
2014/09/22 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
关于五一放假的通知
2015/08/18 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript