vue的路由以后的页面整合

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

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

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

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

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

效果图：

app.vue载入组件：

路由配置：

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下面的地址
配置的依样。这样就能显示在一起。    ^_^ 有差别的地方都报红了一下，在代码中都可以看到。