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中插入显示：

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

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

重定向：加在配置表中

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