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系列(16) 闭包(Closures)
Apr 12 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 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文件系统处理方法小结
2016/05/23 PHP
完美的php分页类
2017/10/24 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
深入理解js promise chain
2016/05/05 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
Linux如何为某个操作添加别名
2013/03/01 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
大跃进口号
2014/06/16 职场文书
经典禁毒标语
2014/06/16 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript