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 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
javascript整除实现代码
Nov 23 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 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基础知识:类与对象(1)
2006/12/13 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
php封装的page分页类完整实例
2016/10/18 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
js 自制滚动条的小例子
2013/03/16 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python实现根据文件格式分类
2019/10/31 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
2014年征兵标语
2014/06/20 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
房产公证书
2015/01/23 职场文书
人事主管岗位职责
2015/02/04 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
代码复现python目标检测yolo3详解预测
2022/05/06 Python