简介
前端路由是单页面富应用的核心技术,在之后的开发中,不可避免地要使用到前端路由技术。这篇文章,将从路由这一概念说开来,并讲解前段路由在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. r o u t e r . r e p l a c e 或 者 t h i s . router.replace或者this. router.replace或者this.router.pushi实现,也可以用$route实现
路由守卫
其实就是类似watch属性一样,可以监视路由的变化,我们可以实现一些操作。
router.beforeEach((to,from,next)=>{
//dosomething
})
其中router为路由对象,这个是全局路由守卫,局部的路由守卫则将beforeEach当成一个属性写在路由内容里面,则对应的路由就有这个守卫了。