router-view組件怎么在vue項(xiàng)目中使用

本篇文章給大家分享的是有關(guān)router-view組件怎么在vue項(xiàng)目中使用，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

<template>
 <div class="navbar">
 <ul id="main">
 <li><router-link to="/food" >商品</router-link></li>
 <li><router-link to="/rating">評(píng)價(jià)</router-link></li>
 <li><router-link to="/seller">商家</router-link></li>
 </ul>
   <!-- 路由匹配到的組件將渲染在這里 -->
   <router-view></router-view>
 </div>
</template>

顯示粗來(lái)的navbar就是這樣的，在同個(gè)頁(yè)面顯示，地址欄也是變的， 我們?cè)趇ndex這個(gè)組件引入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
 }
  ]
 },

多加張圖解釋一下哈

上張圖片注釋的單詞打錯(cuò)了，是“index”，不是“iindex”,個(gè)最后順便附上index.vue的代碼，這樣好理解一點(diǎn)

<template>
 <div class="index">
 <div class="nav"></div>
 <div class="shop-header">
 <div class="imgbox"><img src="../../static/img/56.jpg" alt="" /></div>
 <h3>黃蜀郞雞公煲<span class="ico"></span></h3>
 <p class="info1"><span>*4.6</span><span>月售738</span><span>商家配送約44分鐘</span><span>距離345m</span></p>
 <p class="info2">店內(nèi)免費(fèi)涮煲，（蔬菜、小料、主食、糕點(diǎn)、涼菜、水果、免費(fèi)吃）聞香識(shí)辣，入口知麻，一鍋兩吃，獨(dú)具特色?。?！外賣(mài)米飯請(qǐng)自點(diǎn)??！評(píng)價(jià)問(wèn)題商家會(huì)一一看，可能不能及時(shí)回復(fù)。有問(wèn)題詳詢(xún)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>

以上就是router-view組件怎么在vue項(xiàng)目中使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。