vue之router-view组件的使用

开发的时候有时候会遇到一种情况,比如 :点击这个链接跳转到其他组件的情况,通常会跳转到新的页面,蛋是,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。
以饿了么订餐的情景来说吧,在同个页面,切换显示不同组件的相应内容,同时地址栏的地址是会变的

在这里插入图片描述
怎么实现它呢?

首先 我们在导航组件navbar.vue中写了三个导航链接,他们对应地址分别为:/food,/rating,/seller,点击每个导航链接会跳转到不同的组件,并且加上<router-view></router-view>这个标签
navbar.vue:

<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>

然后,我们在index.vue引入navbar.vue:
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组件在这里引入navbar组件在这里引入navbar组件--><navbar></navbar><!--在这里引入navbar组件在这里引入navbar组件在这里引入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>

最后,路由都是怎么配的呢,在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}]},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go 学习Printf

package main import "fmt" import "os" type point struct {x, y int } func main() { //Go 为常规 Go 值的格式化设计提供了多种打印方式。例如&#xff0c;这里打印了 point 结构体的一个实例。p : point{1, 2}fmt.Printf("%v\n", p) // {1 2…

博客园使用latex编辑公式

如何开启数学公式编辑功能 开启方法见下链接https://www.cnblogs.com/cmt/p/3279312.html 功能 支持数学公式块支持文中数学公式DEMO $$ f(n) \begin{cases}\frac{n}{2}, & \text{if $n$ is even} \\3n1, & \text{if $n$ is odd}\end{cases} $$ 以上的代码产生如下的公…

console.dir有很多浏览器,系统的兼容性问题,不要随便用!

console.dir有很多浏览器&#xff0c;系统的兼容性问题&#xff0c;不要随便用&#xff01; 要使用console.log();转载于:https://www.cnblogs.com/bluestear/p/9400356.html

go 区分指针

先看一段代码 先放一段代码&#xff0c;人工运行一下&#xff0c;看看自己能做对几题&#xff1f; package mainimport "fmt"func main() {var a int 1 var b *int &a var c **int &b var x int *b fmt.Println("a ",a) fmt.Println("&a…

ajax和axios、fetch的区别

1.jQuery ajax $.ajax({type: POST,url: url,data: data,dataType: dataType,success: function () {},error: function () {} });传统 Ajax 指的是 XMLHttpRequest&#xff08;XHR&#xff09;&#xff0c; 最早出现的发送后端请求技术&#xff0c;隶属于原始js中&#xff0c…

函数函数sigaction、signal

函数函数sigaction 1. 函数sigaction原型&#xff1a; int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 分析&#xff1a; 参数 signum &#xff1a;要捕获的信号。参数act&#xff1a;truct sigaction 结构体&#xff0c;后面具体讲解传入…

使用SQL Server连接xml接口,读取并解析数据

--数据源格式&#xff0c;放到任意程序中部署接口即可--<Data xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd"http://www.w3.org/2001/XMLSchema"> --<Peoples> --<People> --<Name>张三</Name> --<S…

mac 卸载编辑器卸不干净

Configuration~/Library/Preferences/Caches~/Library/Caches/Plugins~/Library/Application Support/Logs~/Library/Logs/转载于:https://www.cnblogs.com/smzd/p/10114540.html

vue中使用axios最详细教程

前提条件&#xff1a;vue-cli 项目 安装&#xff1a; npm npm 在main.js导入&#xff1a; // 引入axios&#xff0c;并加到原型链中 import axios from axios; Vue.prototype.$axios axios; import QS from qs Vue.prototype.qs QS;封装好的axios,拿走不送&#xff1a;&am…

Java 类型转换String,List,Map,Array

1. JsonString转为Map String jsoNStr "{\n" "\t\"TestArray\": [\"1\", \"2\", \"3\"]\n" "}";Map map JSON.parseObject(jsoNStr,Map.class);2.Object转为JsonArray(得保证obj是个Array数组&#x…

关于固件

固件(Firmware)就是写入EROM或EPROM(可编程只读存储器)中的程序&#xff0c;通俗的理解就是“固化的软件”&#xff0c;台港澳称为“韧体”。更简单的说&#xff0c;固件就是BIOS的软件&#xff0c;但又与普通软件完全不同&#xff0c;它是固化在集成电路内部的程序代码&#x…

React-Native 指定模拟器RUN-IOS

react-native run-ios --simulator "iPhone 7” 转载于:https://www.cnblogs.com/smzd/p/10185263.html

vue和element-ui使用

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目&#xff0c;我准备把项目放在e盘下&#xff1a;E:\Work\RegisterProject&#xff1b; 命令行进入这个目录&#xff1a; 创…

javaweb学习6——自定义标签

声明&#xff1a;本文只是自学过程中&#xff0c;记录自己不会的知识点的摘要&#xff0c;如果想详细学习JavaWeb&#xff0c;请到孤傲苍狼博客学习&#xff0c;JavaWeb学习点此跳转 本文链接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…

goland 实用键

代码补全 option command v转载于:https://www.cnblogs.com/smzd/p/10313417.html

关于Mysql java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)的问题...

问题所在&#xff1a; 1.连接数据库一个是密码是否正确&#xff0c; 2.driver是否对&#xff0c; 3.有么有jar包冲突&#xff0c;转载于:https://www.cnblogs.com/java-123/p/9403412.html

vscode配置vue环境

一、安装VSCode、NodeJS VSCode&#xff1a;https://code.visualstudio.com/ NodeJS&#xff1a;https://nodejs.org/en/ 二、打开VSCode&#xff0c;安装常用插件 如图所示&#xff08;安装后重新加载即可&#xff09;: 三、项目中添加.vscode文件夹&#xff0c;文件夹中添…

秒杀核心设计(减库存部分)-防超卖与高并发

商品详情页面的静态化&#xff0c;varnish加速&#xff0c;秒杀商品库独立部署服务器这种就略过不讲了。只讨论库存部分的优化 mysql配置层面的优化可以参考我的这篇文章 《关于mysql innodb引擎性能优化的一点心得》 重点设计在数据库层面。 2张表&#xff1a; 第一张&#xf…

go strconv

strconv是golang用来做数据类型转换的一个库。 介绍下strconv最常用的两个方法, 没有解释语言那么自在可以str(int),int(string), 那还算简练。 num, err : strconv.Atoi("-42") str : strconv.Itoa(-42)转换换成bool类型. b, err : strconv.ParseBool("true&qu…

django配置templates、static、media和连接mysql数据库

1.模板文件 # templates配置 if os.path.exists(os.path.join(BASE_DIR, templates)) is False:os.mkdir(os.path.join(BASE_DIR, templates)) TEMPLATES [{# 模板引擎&#xff0c;内置的模板引擎有&#xff1a;# 1. django.template.backends.django.DjangoTemplates# 2. dj…