1.认识前端路由
路由器主要维护的是一个映射表,每个ip地址对应一个计算器的mac地址
前端映射关系:路径->组件(例如:/home->Home.vue)
(1)后端路由阶段:服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示;
(2)前后端分离阶段:后端提供API,在前端对这些请求回来的资源进行渲染;
(3)S(Single)P(Page)A(Application)开发:组件化开发。
history六种模式改变URL而不刷新页面:
replaceState:替换原来的路径
pushState:使用新的路径
popState:路径的回退
go:向前或向后改变路径
forward:向前改变路径
back:向后改变路径
2.认识vue-router
目前前端流行的三大框架,都有自己的路由实现:
Angular的ngRouter;
React的ReactRouter;
Vue的vue-router。-》官方路由。路由用于设定访问路径,将路径和组件映射起来;在vue-router的单页面中,页面的路径的变化就是组件的切换。
安装Vue Router:npm install router
3.路由的使用步骤
(1)创建路由组件的组件;
(2)配置路由映射:组件与路径映射的routes关系;
(3)通过createRouter创建路由对象,并且传入hash和history模式
(4)使用路由:通过<router-link></router-link>
和<router-view></router-view>
在routes中配置了一个映射:
redirect重定向到/home路径下,对默认页面进行渲染,path配置的是根路径:
/ : {path:'/',redirect:'/home'}
4.路由懒加载(需要时再加载)
这里使用之前提到过的webpack分包知识,而Vue Router默认就支持动态来导入组件:
这是因为component可以传入一个组件,也可以接受一个函数,该函数需要放回一个Promise;
而inport函数就是返回一个Promise。
例如:const routes = [
{path:'/home',component:()=>import('../pages/Home.vue)}
{path:'/abour',component:()=>import('../pages/About.vue)}
]
5.路由的其他属性
name,meta
6.路由的嵌套
什么是路由的嵌套呢?
目前我们匹配的Home,About,User等都属于底层路由,我们在他们之间可以来回进行切换;但是在Home页面本身,也可能会在多个组件之间来回切换:
比如Home中包括Product,Message,它们可以在Home内部来回切换。
这个时候我们就需要使用嵌套路由,在Home中也使用router-view来占位之后需要渲染的组件。
{
path:'/home',
component:()=>import('../pages/Home.vue),
children:[
{
path:'',
redirect:'/home/product' //重定向文件
},
{
path:'product',
component:()=>import('../pages/HomeProduct.vue)'
},
{
path:'message',
component:()=>import('../pages/HomeMessage.vue)'
}
]
}
7.路由的内置组件
(1)router-link
常见属性:to,replace,active-class,tag(4.0以前有,决定渲染元素)
router-link中的v-slot(4.0后,取代tag),可以显示多个元素,更加灵活。
a. to属性:是一个字符串,或者一个对象
b. replace属性:设置该属性,当点击时,会调用route.replace(),而不是route.push()
c. active-class属性:设置激活a元素后应用的calss,默认是route-link-active
d. exact-active-class属性:链接精准激活时,应用于渲染的class,默认是route-link-exact-active
(2)router-view(占位)
router-view的v-slot:
Component:要渲染的组件
route:解析出的标准化路由对象
8.动态添加路由
const routes=[]
const router=createRouter({routes})
if(管理员){ //判断权限或用户添加不同的路由
router.addRoute({path:"/order",component:()=>import()}) //动态添加
}
if(){}...
app.use(router;)
9.动态删除路由
方式一:添加一个name相同的路由;
方式二:通过removeRoute方法,传入路由名称;
router.removeRoute(‘路由名称’)
方式三:通过addRoute方法的返回值回调。
const removeRoute=router.addRouter(routeRecord)
removeEoute() //删除路由如果存在的话
10.路由的其他方法补充:
router.hasRoute()。检查路由是否存在
router.getRoutes()。获取一个包含所有路由记录的数组
11.路由导航守卫
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航
全局的前置守卫beforeEach是在导航出发时会被回调的。有两个参数:to和from
let counter=0;
router.beforeEach((to,from)=>{
console.log(`进行了${++counter}次路由跳转`);
return false
})