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