vue-router深入学习

#一、router路由发展的几个阶段
##1、后端路由阶段
后端渲染:前端只有html和css,后端通过jsp等技术渲染页面,再交给前端。
后端路由:后端处理url和页面映射之间的关系。后端通过正则匹配url,controller控制器来处理匹配的页面,把html返回给前端。

##2、前后端分离阶段

后端负责数据,
前端渲染:网页中的内容大部分是由前端写的js在浏览器中执行,后端负责提供API和数据

##3、前端路由阶段(SPA单页面富应用阶段)
整个网页只有一个html页面(包含html+css+js),当用户点击时,从url1–>url2,通过前端路由,加载url2的内容(在vue中就是加载一个组件。)
改变url页面不整体刷新,两种实现方式:

  • (1)改变url的hash,location.hash=’aaa’
  • (2)html5中的history模式pushState,history.pushState({},’’,’home’)三个参数为data title url。
    history.pushState入栈
    history.go(-1)=history.back()出栈
    history.forward()=history.go(1)
    #二、基础知识0
    ##1、懒加载
    build打包时,appxxx.js文件变得很大,使用懒加载更高效。
    router懒加载:用到的时候再加载。把不同路由对应的组件分割成不同的块,路由被访问时才加载对应组件,这样更高效。

##2、嵌套路由
(1)创建子组件children,路由映射中配置
(2)在组件内使用
##3、传递参数params和query
params:是路由的一部分,一般params后接userid或name,展示:$router.params.userid
query:查询,即拼接在url后面的内容,url统一资源定位符格式:
协议://主机名:端口号(默认80,即不显示)/路径?query#fragment片段
通过查询
<router-link :to="{path: '/profile', query:{name:'zx',age:'25'}}" tag="button">档案</router-link>
对应url中的内容发生变化
#三、router基础1

1.router和route区别

  • router是vue中本身创建的class,ctrl加点击可跳转到类中。

所有的组件都继承自Vue的原型。在main.js中定义的方法全局可用。
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

  • route仅为当前活跃的跳转所用。

$route为当前router跳转对象里面可以获取name、path、query、params等
image.png

2.导航守卫

在不同页面之间跳转时,title不变,使用导航守卫来监听跳转动作,实现title变化
router.beforeEach({
window.document.title= to.meta.title //在钩子(routes)中定义标题,meta:title
next() //next需要包含,它是一个函数,跳转到route
})
beforeEach是守卫(guard)函数,有to,from,next三个参数。
afterEach(后置钩子函数,不用next)
image.png

  • 全局守卫:beforeEach和afterEach
  • 路由独享守卫:配置在router中

beforeEnter:(to,from,next)=>{
next()
}

  • 组件内部守卫:beforeRouteEnter(不能获取实例中的this), beforeRouteUpdate(),beforeRouteLeave。

    3. keep-alive

    是vue的内置组件。
    在使用keep-alive之前,每次从首页跳转到关于,组件都会被销毁,再点首页,又重新创建(生命周期)。为了不这样多次创建销毁,使用keep-alive:

  • <``kee-alive exclue="profile,about"> //profile组件会被从创建销毁,没有保持alive,profile和alive之间不能加空格

  • <router-view/>

  • </lkeep-alive>

activated和deactivated只有在使用keep-alive时才有效。