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 同时提交多个Web表单的方法
Feb 19 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JavaScript函数详解
Nov 17 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue实现数据控制视图的原理解析
Jan 07 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
通过javascript把图片转化为字符画
2013/10/24 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
深入解析Python编程中JSON模块的使用
2015/10/15 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
生日寿宴答谢词
2014/01/19 职场文书
爱国主义电影观后感
2015/06/18 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
MySQL系列之四 SQL语法
2021/07/02 MySQL
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript