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 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
深入理解js中的加载事件
Feb 08 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 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
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python groupby 函数 as_index详解
2019/12/16 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Numpy数组的广播机制的实现
2020/11/03 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
什么是Rollback Segment
2013/04/22 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
市场营销工作计划书
2014/05/06 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android
MySQL深分页问题解决思路
2022/12/24 MySQL