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 相关文章推荐
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
Three.js学习之几何形状
Aug 01 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
angular中的cookie读写方法
Aug 02 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
oracle资料库函式库
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
详解python中的lambda与sorted函数
2020/09/04 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
介绍一下#error预处理
2015/09/25 面试题
白酒市场开发计划书
2014/01/09 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers