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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
详解JS预解析原理
Jun 16 Javascript
vue组件开发之slider组件使用详解
Aug 21 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
菜鸟修复电子管记
2021/03/02 无线电
PHP JSON 数据解析代码
2010/05/26 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP7 弃用功能
2021/03/09 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
react写一个select组件的实现代码
2019/04/03 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
基于pip install django失败时的解决方法
2018/06/12 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python内置模块collections知识点总结
2019/12/19 Python
PyTorch中permute的用法详解
2019/12/30 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
市场营销专业推荐信
2013/11/03 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers