VUE路由

1.路由的模式和区别

路由的模式：history hash

区别：

1）找不到当前页面发送请求：history会给后端发送一次请求（后端压力、增加404页面），hash不会

2）关于项目打包前端自测问题：hash是可以看到内容的，history默认情况时看不到内容的

3）关于表象不同 ：history:/ hash:#

2.子路由和动态路由

子路由项目不一定需要，方便路由管理 children:[{path:'/',name:'xx',component:()=> import('../xxx')}]

动态路由：path:'xx/:id' {{$route.params.id}}

3.路由传值（两种）

params传参 路由属性配置传参 query传参

this.$router.push({ 
    name:"admin",　　　　
    //这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) 
    params:{id:item.id}  // this.$route.params.id
}) 

this.$router.push({
    name:"/admin/${item.id}", //this.$route.params.id
}) 

this.$router.push({ 
    name:"/admin",　　　　 
    query:{id: item.id} 
}) 

区别

1）params传参

只能用 name，不能用 path。

地址栏不显示参数名称 id，但是有参数的值。

2）query传参

name 和 path 都能用。用 path 的时候，提供的 path 值必须是相对于根路径的相对路径，而不是相对于父路由的相对路径，否则无法成功访问。

地址栏显示参数格式为?id=0&code=1

4.导航故障

当前页面跳转当前页面报错

解决添加catch

import VueRouter from 'vue-router'
VueRouter.prototype.push = function(location){
    return routerPush.call(this,location).catch(error => error);
}

5.$router和$route区别

$route包含当前路由对象

$router包含整个路由的属性和方法

6.导航守卫：vue-router 有哪些钩子函数?

有三类：

全局守卫（beforeEach路由进入之前\afterEach路由进入之后\全局解析守卫 router.beforeResolve）、

路由独享守卫(beforeEnter路由进入之前)、

组件内守卫(beforeRouteEnter路由进入之前\beforeRouteUpdate路由更新之前\beforeRouteLeave路由离开之前)

推荐路由独享守卫；全局守卫进入类项目多，提前存入信息；组件内守卫的话，组件太多，不好维护

路由独享守卫：在路由文件里 beforeEnter:function(to,from ,next)=>{if(true){next()//通行} else{next('/login')}}

7. route 和 router 的区别是什么？

route 是“路由信息对象”，包括 path , params , hash , query , fullPath , matched , name 等路由信息参

数。

router 是“路由实例对象”，包括了路由的跳转方法( push 、 replace )，钩子函数等。