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动态调整iframe高度的方法
Mar 06 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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/06 新手入门
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
python机器学习库常用汇总
2017/11/15 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python GUI编程完整示例
2019/04/04 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
大学校庆邀请函
2014/01/11 职场文书
模具专业自荐信
2014/05/29 职场文书
升学宴家长答谢词
2015/09/29 职场文书
合同补充协议书
2016/03/24 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书