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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
javascript动态创建链接的方法
May 13 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 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实现图形显示Ip地址的代码及注释
2014/01/20 PHP
Yii分页用法实例详解
2014/12/04 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
基于python实现从尾到头打印链表
2019/11/02 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python __slots__的使用方法
2020/11/15 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
四查四看剖析材料
2014/02/14 职场文书
《自选商场》教学反思
2014/02/14 职场文书
工人先锋号申报材料
2014/12/29 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
军训通讯稿范文
2015/07/18 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android