router路由的配置和使用（详细教程）：main.js、App.vue、路由文件index.js之间的关系连接

vue路由的原理： 

• 路由就是专门来实现单页面应用的；
• 根据不同的路径，加载不同的组件；
• 路径和组件之间一一映射的关系；
• 路径，组件一一对应；
• 加载这个路径，这个组件就出来了；
• 原理图示：

通过一个小案例来演示：路由配置和使用的整个流程

• 路由是一个单独的模块，没有集成在vue中；

main.js中引入路由：

组件定义： 

• 写一个小案例，案例中需要用的三个组件，组件写在views下面： 

• 三个组件里的内容，就红框里的改了，其他都一样：

 路由配置：

• 找到下面这个js文件，在里面配置路由：

• 路由配置最简单的模式是：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)// 注册路由插件

// 配置表
const routes = []

const router = new VueRouter({
  routes
})

export default router

• 组件导入和配置组件和路由一一对应：

import Vue from 'vue'
import VueRouter from 'vue-router'
import FilmsView from '../views/FilmsView.vue'// 引入FilmsView.vue组件文件
import CinemasView from '../views/CinemasView.vue'
import CenterView from '../views/CenterView.vue'

Vue.use(VueRouter)// 注册路由插件

// 配置表,将路径和组件一一对应配置好
const routes = [
  {
    path: '/films',
    component: FilmsView
  },
  {
    path: '/cinemas',
    component: CinemasView
  },
  {
    path: '/center',
    component: CenterView
  }

]

const router = new VueRouter({
  routes
})

export default router

App.vue中插入显示：

<template>
  <div>
    <!-- 路由容器 -->
    <!-- 相当于插槽 -->
    <router-view></router-view>
  </div>
</template>

结果：输入相应路径，就会加载对应组件：

 

注意一个问题：如果你要用@来表示src绝对路径，要进行配置；

整个路由配置的思路是：（文件之间的关系）

首先是main.js文件根据App和router这两个路径引入App.vue根组件和router路由，并把路由初始化在项目中；

然后它就会按照路由文件index.js中的配置加载我们上面定义的三大组件：FilmsView、CinemasView、CenterView；

然后我们在App.vue根组件中加了路径容器：<router-view></router-view>，意思是你子组件想要显示那就要经过我跟组件的同意，加上路径容器以后，只要路由配置对了，就可以在页面上显示。

 

 

 

重定向：加在配置表中

// 重定向，优先级最低，只有没有路径了，才会用
  {
    path: '*',
    redirect: '/films'
  }