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 相关文章推荐
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
音乐学个人的自荐书范文
2013/11/26 职场文书
日语专业个人的求职信
2013/12/03 职场文书
班主任工作年限证明
2014/01/12 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL