2019獨角獸企業重金招聘Python工程師標準>>>

上一篇：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

轉載于:https://my.oschina.net/u/3802541/blog/1811010

總結

以上是生活随笔為你收集整理的Vue入坑——vue-router单页面多路由配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。