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特效的方法
Feb 02 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
浅谈开发eslint规则
Oct 01 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
js获取form表单中name属性的值
2019/02/27 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
JavaScript实现简单计算器功能
2019/12/19 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python实现ID3决策树算法
2017/12/20 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
春节请假条
2014/04/11 职场文书
拓展策划方案
2014/06/03 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
师德承诺书
2015/01/20 职场文书
主持稿开场白
2015/06/01 职场文书
健康证明
2015/06/19 职场文书
详解python的内存分配机制
2021/05/10 Python
总结Python使用过程中的bug
2021/06/18 Python
Python安装使用Scrapy框架
2022/04/12 Python