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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
redux.js详解及基本使用
May 24 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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投票系统防刷票判断流程分析
2012/02/04 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php 可变函数使用小结
2018/06/12 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
javascript计时器详解
2015/02/28 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
js实现点赞效果
2020/03/16 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
python中的随机函数小结
2018/01/27 Python
python进行文件对比的方法
2018/12/24 Python
超简单使用Python换脸实例
2019/03/27 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python发送邮件实现基础解析
2020/08/14 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
培训主管岗位职责
2014/02/01 职场文书
学习十八大报告感言
2014/02/04 职场文书
旅游市场营销方案
2014/03/09 职场文书
幼儿园安全责任书
2014/04/14 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
Python学习之时间包使用教程详解
2022/03/21 Python