Vue学习（第七天）

Vue学习（第七天）

一、路由知识补充

1.动态路由

在配置路由映射关系的时候配置动态路径，比如在user后面动态的添加userId

  {
    path: '/user/:userId',
    component: () => import('../components/User.vue'),
    meta: {
      title: '用户'
    }
  },

2.路由懒加载

由于当前是SPA，即再第一次请求资源时请求的是全部的资源，若资源过大则会导致页面出现短暂的空白，采用懒加载可以有效的避免这一情况，再需要用到指定的组件时在发出请求

const Home = ()=>import('./components/Home');
{
	path:'/home',
	component:home
}

3.打包文件的解析

• app.js 所写代码
• manifest.js 底层支撑代码
• vendor.js 第三方代码

4.嵌套路由

1. 创建对应的子组件，并且在路由映射中配置相应的子组件
2. 在组件内使用标签

{
    path: '/home',
    component: () => import('../components/Home'),
    children: [{ //配置子路由映射关系
        path: '', //默认重定向
        redirect: 'news'
      },
      {
        path: 'news', //不需要加/
        component: () => import('../components/HomeNews')//懒加载
      }, {
        path: 'messages',
        component: () => import('../components/HomeMessages')
      }
    ],
    meta: {
      title: '首页'
    }
  },
  
  <template>
  <div>
    <h2>我是首页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/messages">消息</router-link>
    <router-view></router-view>
  </div>
</template>

5.参数传递

方式一：params类型

配置路由格式

/router/:userId

传递方式：在path后面跟上对应的值

传递后形成的路径

/router/123,/router/abc

获取值

this.$route.params.userId

方式二：query方式

配置路由格式：普通配置即可

传递方式：对象中使用query的key作为传递方式

传递后形成的路径

/router?id=123

获取值

//传递值
<router-link :to="{path:'/profile',query:{name:'lele',age:18}}" replace>档案</router-link>
//获取值
{
   
   {$route.query.name}}
{
   
   {$route.query.age}}

6.$router和$route

• $router

  //$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象
  

• $route

  $route相当于当前处于活跃状态的路由对象，可以从里面获取name,path,params,query等。
  

二、导航守卫

1.生命周期函数回顾

• created：组件被创建后回调该函数
• mounted：挂载到整个DOM上时回调该函数
• update：界面发生更新时回调该函数

2.基本使用

全局导航守卫

router.beforeEach:全局前置守卫

router.afterEach:全局后置置守卫

案例演示：当组件发生变化时改变页面的标签名称

router.beforeEach(function(to,from,next){
	to:即将要进入的目标的路由对象
	from：当前导航即将要离开的路由对象
	next();//必须调用 调用该方法后，才能进入下一个钩子
	从from跳转到to
	document.title = to.matched[0].meta.title //设置标题名称 title的值需要在配置路由映射关系时设置
});

路由独享守卫

是写在路由里面的，只有当进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

三、keep-alive

顾名思义，当离开组件时组件不会被destroyed，即缓存

activated与deactivated

以上两个回调函数必须在keep-alive下才会被回调，其中activated时当处于活跃状态下发生回调，而deactivated是当变为不活跃状态时发生回调

  //记录子路由的历史选项
  activated() {
    console.log('activated');
    this.$router.push(this.path);
  },

include与exclude

设置哪些组件缓存，哪些组件不缓存1

    <keep-alive exclude='Profile,User'>
      <router-view></router-view>
    </keep-alive>