“约见”面试官系列之常见面试题第二十四篇之vue-router使用（建议收藏）

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

以饿了么订餐的情景来说吧，在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的

怎么实现它呢？

首先我们在导航组件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}]},

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）

“约见”面试官系列之常见面试题第二十四篇之vue-router使用（建议收藏）相关推荐

“约见”面试官系列之常见面试题第二十二篇之函数闭包（建议收藏）
目录 1.概念 2.特点 3.闭包的创建: ---------------------------------------------我是容易看懂的分界线-------------------- ...
“约见”面试官系列之常见面试题第十四篇之所有数据类型（建议收藏）
最近有很多人说数据类型是 6种.我怎么记得JS的数据类型有8种.最近发现好多人对JS的基础不太了解.很多数据类型都没有搞清楚.不BB,我就按我的理解写一波笔记,每次看一波书我就感觉一次比一次多懂一点. ...
“约见”面试官系列之常见面试题第二十九篇之Vue和React的区别
vue与react的不同之处是什么?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue与react,两者都为当下主流框架相同之处在于: 使用 V ...
“约见”面试官系列之常见面试题第二十八篇之vue中的混合（minix）实例理解
minix 是个什么东西, 就是混合,把你混合给我浅显表述就是你说 : '我叫李四', 我说 : '我叫张三', 然后把你混合给我, 就成了我说 : '我叫张三我叫李四', 所有解说都在例子里 ...
“约见”面试官系列之常见面试题第十九篇之数组去重（建议收藏）
目录数组去重的方法一.利用ES6 Set去重(ES6中最常用) 二.利用for嵌套for,然后splice去重(ES5中最常用) 三.利用indexOf去重四.利用sort() 五.利用对象的属 ...
“约见”面试官系列之常见面试题第三十三篇之事件委托（建议收藏）
目录概述引入原因具体写法适用场景概述 "事件处理程序过多"问题的解决方案就是事件委托,利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:由 ...
“约见”面试官系列之常见面试题第二十六篇之vue-router的hash和history（建议收藏）
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Vue-router 中hash模式和hi ...
“约见”面试官系列之常见面试题第二十五篇之对vue-router的理解（建议收藏）
先整体展示下vue-router使用方式,请牢记一下几步哦! import Vue from 'vue' import VueRouter from 'vue-router' //注册插件如果是在浏 ...
“约见”面试官系列之常见面试题之第九十三篇之vue获取数据在哪个周期函数（建议收藏）
然后必须知道一点,vue是数据驱动的(只关心data即可),换句话说,就是,只要我能操作到 data中的数据即可. 所以,根据上面的生命周期,其实你放到 mounted中完全可以,因为这个阶段data ...

“约见”面试官系列之常见面试题第二十四篇之vue-router使用（建议收藏）

“约见”面试官系列之常见面试题第二十四篇之vue-router使用（建议收藏）相关推荐

最新文章

热门文章