vue中的router-view组件的使用教程

开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。

比如我们在一个导航组件中写了三个导航链接，他们的地址分别为：/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啊基本信息可以忽略一下下

那么他们的路由都是怎么配的呢，在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
 }
  ]
 },

多加张图解释一下哈

上张图片注释的单词打错了，是“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组件的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Vue双向数据绑定原理解析

    详解Vue双向数据绑定原理解析

    基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调. 思路整理 要实现mvvm的双向绑定,需要实现如下几点: 1.实现一个数据监听器Observer,能够对对象的所有属性进行监听,发生变化时拿到最新值通知订阅者 2.实现一个解析器Compile,对每个子元素节点的指令进行扫描和解析,根据模板指令替换数据,初始化视图以及绑定相应的回调函数: 3.实现

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • 轻松理解vue的双向数据绑定问题

    Vue介绍 Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的.因为它提供了简洁易于理解的api,使得我们很容易上手. Vue与MVVM 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步. 双向绑定 主流双向数据绑定实现原理 脏值检测 : 这是AngularJS实现双向数据绑定的方式.

  • 基于vue-upload-component封装一个图片上传组件的示例

    需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要

  • Vue组件内部实现一个双向数据绑定的实例代码

    思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下: import Vue from 'vue' const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • Vue中this.$router.push参数获取方法

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • vue中使用v-model完成组件间的通信

    以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">

  • 在 Vue 中编写 SVG 图标组件的方法

    在考虑了将矢量图标从图标字体迁移到内联 SVG 的 原因 之后,我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案,同时仍能保持使用图标字体的灵活性和易用性--能够使用 CSS 轻松改变图标的大小.颜色以及其它属性. 一种流行的方法是使用 v-html 指令和 npm 模块 html-loader 来将 SVG 导入到我们的 Vue 模板中,并在 Vue 的生命周期函数 mounted() 中修改渲染的 <svg> 元素.CSS 样式可以直接应用到 <svg> 元素

  • 在vue中封装的弹窗组件使用队列模式实现方法

    前言 由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器 什么是队列 队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue

  • 在vue中使用防抖函数组件操作

    初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i

  • vue中element 的upload组件发送请求给后端操作

    1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil

  • Vue中正确使用Element-UI组件的方法实例

    一.CDN 目前可以通过 unpkg.com/element-ui获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unp

  • vue中使用router全局守卫实现页面拦截的示例

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

随机推荐