vue - router

2020-07-13  本文已影响0人  林智_lz

路由传参

https://www.jianshu.com/p/4c5c99abb864https://segmentfault.com/a/1190000009651628

this.$router.push({

                    name: 'rateApprove',

                    params: {

                        flowCode:'RateApproval',

                        row: input

                    }

                });

this.$router.push({

                    path: "/bookingmanagement/unWaybillTransfer"

                });

this.$router.go(-1)           //跳转到上一次浏览的页面

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

$router 是“路由实例”对象,即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等。

动态加载理由

addRoutes()


路由缓存

在router-view外包裹keep-alive

例:

<keep-alive>

      <router-view></router-view>

    </keep-alive>

使用 meta

在路由中添加下面属性 

    meta: {keepAlive: true // 缓存}

    meta: {keepAlive:false // 不缓存 }

    例:

    {

          path:'/Distribution',

          name:'Distribution',

          component: Distribution,

          meta: {keepAlive: true // 缓存}

}


vue-router hash 模式和 history 模式是如何实现的?

hash 模式:

# 后⾯ hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新⻚

⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化,然后根据 hash 变化来实现

更新⻚⾯部分内容的操作。

(  window.addEventListener('hashchange',fn)  )

history 模式:

history 模式的实现,主要是 HTML5 标准发布的两个 API, pushState 和 replaceState ,这

两个 API 可以在改变 url,但是不会发送请求。这样就可以监听 url 变化来实现更新⻚⾯部分内容

的操作。

(  window.addEventListener('popstate', fn) )

上一篇下一篇

猜你喜欢

热点阅读