Vue入坑——vue-router單頁面多路由配置

上一篇：vue-router如何傳遞參數

一塊兒學vue——vue學習總路線

——————————^~^我是萌萌噠分割線^~^————————————————

前言

在上一篇中，咱們學習了在vue路由中如何傳遞參數的三種方法。本篇咱們來學習一下在一個頁面中如何插入多個路由。固然 仍是在咱們以前建的項目基礎之上。

單頁面多路由配置

（1）、插入路由

在App.vue中插入兩個router-view

如今App.vue中就有了三個router-view，其中name的值須要特別注意，由於他們待會兒咱們都要使用，在這裏我就把樣式寫在裏面了。

（2）、新建這兩個組件

在componnets文件夾下新建這兩個組件，取名叫left.vue與right.vue

在裏面咱們就簡單打印兩句話

left.vue

<template>
  <div>
    <p>{{leftmsg}}</p>
  </div>
</template>
<script>
  export default{
    name:'leftvue',
    data(){
      return{
        leftmsg:'i am left vue'
      }
    }
  }
</script>
<style scoped>
  
</style>

right.vue

<template>
  <div>
    <p>{{rightmsg}}</p>
  </div>
</template>
<script>
  export default{
    name:'rightvue',
    data(){
      return{
        rightmsg:'i am right vue'
      }
    }
  }
</script>
<style scoped>

</style>

（3）、配置路由

在index.js裏配置路由

先引入組件

import leftvue from '../components/left'
import rightvue from '../components/right'

再配置路由

運行：

輸入路徑

http://localhost:8080/#/leftright

ok啦。

——————————^~^我是萌萌噠分割線^~^————————————————

                                                                                                    下一篇：vue-router重定向redirect