vue的路由以后的页面整合

前面呢也提到一点点，今天就吧这个页面整合给分享一下。有不对的地方还望包容。

在vue中，一般在主显示的界面的路径呢一般是‘/’也就是单括号中有一斜杠的这个呢是默认的显示路径。只要路由配置了这个路径用<router-view/>就能显示，如果想显示多个组件，那目前有两种方法，一种是以标签的形式，一种是利用路由components形式。啊，讲的比较笼统。

先不管它，咱们先创建几个组件。把路由写了，在写组件。怎么看编写的组件呢。就是写哪个把哪个的路由的路径改为‘/’，其他的为‘/+名称’，由于本人比较笨，目前只有用这种方法写组件，有好的方法，希望在下面留言。

一般组件搭建页面采用的是定义标签和路由的方式。有更好的方法也欢迎留言。

好啦，批跨了这么半天，大家都想直入主题：

效果图：

app.vue载入组件：

<template>
  <div id="app">
    <Top></Top>
    <div class="vue-aps">
      <ul>
        <Left></Left>
      </ul>
      <li class="right-main">
        <router-view></router-view>
        <!--<router-view name="Index"></router-view>-->
      </li>
    </div>
  </div>
</template>
<script>
import Left from './views/leftMenu'
import Top from './views/top'
export default {
  components: {
    Left,
    Top
  }
}
</script>

<style lang="css">
  li{
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  ul{
    padding: 0;
    margin: 0;
  }
  .vue-aps{
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .right-main{
    width: 800px;
    height: 406px;
    overflow: hidden;
    box-sizing: border-box;
  }
</style>
路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Index from '../components/rightMain/index'
import Main from '../components/rightMain/main'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'main',
    components: {
      default: Main
      // Index: Index
    }
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('../components/rightMain/index')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
这是显示右边切换的方法。

右边共同显示：

大家又看到我图片上代码注释的地方码，这三处全部显示就可以全部显示了。


这就是共同显示的方法。

同样道理也能让地址不同的显示相同：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/rightMain/index'
import Main from '../components/rightMain/main'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'main',
    components: {
      default: Main,
      Index: Index
    }
  },
  {
    path: '/index',
    name: 'index',
    components: {
      default: Main,
      Index: Index
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

看这两个地址，path一个是  ‘/‘  一个是 ’/index'  。这两个在components中的配置方法一样。点击页面后的显示也依样，想把那些组件显示在哪个地方就将components下面的地址
配置的依样。这样就能显示在一起。    ^_^ 有差别的地方都报红了一下，在代码中都可以看到。