简介
前端路由是单页面富应用的核心技术，在之后的开发中，不可避免地要使用到前端路由技术。这篇文章，将从路由这一概念说开来，并讲解前段路由在vue中的应用。
概念
路由是计算机网络的一个重要概念，简单的讲（可能不准确），路由是中转站，实现端到端的转发，是一个节点，会根据传入的数据包的地址决定传输到哪里去（也就是下一跳），维护着一个路由表。
后端路由
后端路由是之前后端渲染技术的关键技术。简单来讲，就是服务器维护着一个路由表（即url与对应资源的映射表），当用户点击某个页面url时，服务器会根据点击的url渲染出一个完整的页面交给前端。也就是路由表是由服务器负责的。
前端路由
同理，前端路由意味着路由表由前端进行维护。这样的好处很多，服务器不用承受太大的压力。
跳转url将不会将整个网页刷新（hash模式/history模式）
vue前端路由基本使用
-
安装（npm install vue-router）
-
配置
2.1 创建一个js文件（最好单独一个文件夹，进行路由配置）
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router(...) //内容为路由内容，后面按需要填充2.2 在入口js中的vue对象中导入路由
import router from './router' //导入刚刚写的js文件，此处为略写 new Vue({ el: '#app', router, //这样就算导入了，变量名相同时可略写 components: { App }, template: '<App/>' })2.3 路由占位符
<template> <div id="app"> <router-view/> </div> </template>路由指向的组件将会显示在占位符号上。
子路由指向的组件将展示在父路由指向的组件代码的占位符号上。
路由写法示例以及知识讲解
下面是一个位置的路由js文件的示例，已经尽可能把所有知识点塞进去了。
import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import('../pages/Login/Login');
const Home = () => import('../pages/Home/Home');
const HallManage = () => import('../pages/Home/children/HallManage');
const UserManage = () => import('../pages/Home/children/UserManage');
const MovieManage = () => import('../pages/Home/children/MovieManage');
const MovieSchedule = () => import('../pages/Home/children/MovieSchedule');
const CinemaManage = () => import('../pages/Home/children/CinemaManage');
const OrderManage = () => import('../pages/Home/children/OrderManage');
Vue.use(Router);
export default new Router({
routes: [
{path:'/',redirect:'/login'},
{
path:'/login',
name:'login',
component:Login
},
{
path: '/home',
name: 'home',
component: Home,
children:[
{path:'user_manage',component:UserManage},
{path:'movie_manage',component:MovieManage},
{path:'movie_schedule',component:MovieSchedule},
{path:'cinema_manage',component:CinemaManage},
{path:'hall_manage',component:HallManage},
{path:'order_manage',component:OrderManage},
{path:'/',redirect:'/home/user_manage',}
]
},
{
path: '/user/:userId',
component: Home //这是我硬加上去的，讲解用
}
],
mode: 'history'
})
路由懒加载
const Login = () => import('../pages/Login/Login');
所谓懒加载就是用到了再加载，可以避免头次浏览网页时传过来的js过大导致的太慢的问题。
不用懒加载的话，只要把箭头函数去掉就行了。
路由重定向
对于某些特定的url，我们不希望用户访问，或者这些url没有指向实质的内容，我们可以对这些url重定向
{path:'/',redirect:'/login'}
子路由
路由下还有路由时，就要用到路由嵌套了：
{
path: '/home',
name: 'home',
component: Home,
children:[
{path:'user_manage',component:UserManage},
{path:'movie_manage',component:MovieManage},
{path:'movie_schedule',component:MovieSchedule},
{path:'cinema_manage',component:CinemaManage},
{path:'hall_manage',component:HallManage},
{path:'order_manage',component:OrderManage},
{path:'/',redirect:'/home/user_manage'}
]
}
如上，放在children里即可，占位符写在父路由上，也就是Home组件里。
路由模式
在mode属性中设置，有history和hash两种
动态路由
{
path: '/user/:userId',
component: Home //这是我硬加上去的，讲解用
}
这样写，任何user/后接字符串的url都会指向这个组件，而且这个组件可以通过params获取这个字符串。
此处补充一点，自我感觉，通过params传递参数不如用query对象传递参数来得好
this.$router.push({path:'..',query:{..}})
//此时可以通过$route.query拿到传过来的东西
路由跳转
除了router-link可以跳转外，也可以写js代码来实现跳转，
一般用this. router.pushi实现，也可以用$route实现
路由守卫
其实就是类似watch属性一样，可以监视路由的变化，我们可以实现一些操作。
router.beforeEach((to,from,next)=>{
//dosomething
})
其中router为路由对象，这个是全局路由守卫，局部的路由守卫则将beforeEach当成一个属性写在路由内容里面，则对应的路由就有这个守卫了。
