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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
JavaScript中的函数式编程详解
Aug 22 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中的session安全吗?
2016/01/22 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
python局部赋值的规则
2013/03/07 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python中暂存上传图片的方法
2015/02/18 Python
详解Python Socket网络编程
2016/01/05 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
使用python接入微信聊天机器人
2020/03/31 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
施工资料员岗位职责
2014/01/06 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
学前教育见习总结
2015/06/23 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python