[JavaScript知识库]router和keep-alive

router的使用

this.$router.replace('/home')，无法前进后退。
this.$router.push('/home')  可以前进后退
// 路由的全局对象，包含所有的路由对象
console.log(this.$router)
// 当前活跃对象
console.log(this.$route)
// 点击函数中router携带参数
this.$router.replace({
        path: '/profile',
        query: {
          name:'liu',
          age:'22',
          height:'157'
        }
      })

router-link组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址.

// router-link 加 replace 和不加的区别。
// 在不加replace的时候，网址是可以通过箭头前进和后退的。说明前进后退用的pushState。改成repalceState后，就不可以通过箭头前进和后退了。
<router-link to="/home" replace>首页</router-link>

// 标签router-link 传递参数的情况
<router-link :to="{
      path: '/profile',
      query: {name:'liu',age:'22',height:'157'}
    }" replace>档案</router-link>

keep-alive组件
keep-alive是Vue内置的额一个组件，可以使被包含的组件保留状态，或避免重新渲染。
keep-alive两个属性: include(字符串或者正则表达式，只有匹配的组件会被缓存) exclude(字符串或者正则表达式，任何匹配的组件都不会被缓存) 不能加空格。
created与destroyed钩子：created和destroyed,在没有加keep-alive之前,这两个回调函数在每次载入离开该组件都会被重复加载,加了以后就只有第一次载入离开会被触发。
keep-alive两个属性: include(字符串或者正则表达式，只有匹配的组件会被缓存) exclude(字符串或者正则表达式，任何匹配的组件都不会被缓存) 不能加空格。
router-view是一个组件, 如果将其包在keep-alive里面，所有路径匹配到的视图组件都会被缓存。意思就是路由跳转指向的页面将会显示在router-view中。

<keep-alive exclude="">
   <router-view></router-view>
</keep-alive>
keep-alive include="">
   <router-view></router-view>
</keep-alive>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖