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 二维数组
Nov 26 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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动态函数调用方法
2015/05/21 PHP
php给数组赋值的实例方法
2019/09/26 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
载入进度条 效果
2006/07/08 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python求离散序列导数的示例
2019/07/10 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
安全资料员岗位职责
2013/12/14 职场文书
应用外语系自荐信
2014/06/26 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python