VUE-CLI学习第五天

1.vue-cli打包文件解析

dist/js/xxx.js文件

• app.xxx.js（业务代码）
• manifest.xxx.js(底层代码)
• vendor.xxx,js（第三方代码）

2.vue-router的路由懒加载

• 按这个方式设置路由，打包后会生成不同组件的js

  const routes = [
      {
          path: '/about',
          name: 'About',
          component: () => import('../views/About.vue')
      }
  ]
  

3.嵌套路由

父组件

<template>
  <div class="home">
    <router-link to="/home/news">新闻</router-link> |
    <router-link to="/home/messages">消息</router-link>
    <router-view></router-view>
  </div>
</template>

子组件(HomeNews子组件)

<template>
<div>
    <!--ul>li{新闻$}*4-->
    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
        <li>新闻4</li>
    </ul>
</div>
</template>

<script>
    export default {
        name: 'HomeNews'
    }
</script>

src/router/index.js文件

const routes = [
      {
          path: '/home',
          name: 'Home',
          component: () => import('../views/Home.vue'),
          children:[
              {
                  path: '',
                  redirect: 'news'
              },
              {
                  path: 'news',
                  component: () => import('../views/HomeNews.vue')
              },
              {
                  path: 'messages',
                  component: () => import('../views/HomeMessage.vue')
              }
          ]
      }
]

4.传递参数

• 传递参数主要有两种类型：params和query

1. params传参请参考第四天学习笔记

2. query传参

使用标签传参

• App.vue

  <router-link :to="{path:'/about',query:{name: 'why',id: userId}}">About</router-link>
  
  <script>
  export default{
      name:'App',
      data(){
          return {
              userId:'goodhu'
          }
      },
  }
  

• About.vue

  <template>
  <div class="about">
      <h1>This is an about page</h1>
      <h2>{{$route.query.name}}</h2>
      <h2>{{$route.query.id}}</h2>
  </div>
  </template>
  

使用事件传参(接收参数页面与标签传参方法一致)

<button @click="aboutClick">about</button>

<script>
  export default{
      name:'App',
      data(){
          return {
              userId:'goodhu'
          }
      },
      methods:{
          aboutClick() {
              this.$router.push({
                  path: '/about',
                  query: {
                      name: 'why',
                      id: this.userId
                  }
              });
          }
      }
  }
</script>

5.$router与$route的区别

• $router指向VueRouter对象

  const router = new VueRouter({
      routes,
      mode:'history'
  })
  

• $route：假设当前路径{为}^{\prime }{/}^{\prime }则$route指向以下对象

  const routes = [
      {
          path: '/',
          redirect:'/home'
      }
  ]
  

6.全局导航守卫

官方文档

• https://router.vuejs.org/zh

单独配置页面标题

<script>
export default {
    name: 'Home',
    created() {
      document.title = '首页'
    }
}
</script>

全局配置页面标题

• src/router/index.js

  //配置routes添加meta属性
  const routes = [
      {
          path: '/home',
          name: 'Home',
          component: () => import('../views/Home.vue'),
          meta:{
              title: '首页'
          }
      },
  ]
  //创建VueRouter实例
  const router = new VueRouter({
      routes,
      mode:'history'
  })
  //配置beforeEach方法，from表示当前导航即将离开的路由对象，to表示即将要进入的目标的路由对象，next表示跳转函数，调用该方法后才能进入下一个钩子
  router.beforeEach((to,from,next)=>{
      document.title = to.meta.title;
      next();
  })
  

• 当有嵌套路由时显示第一个路由标题

  router.beforeEach((to,from,next)=>{
      document.title = to.matched[0].meta.title;
      next();
  })
  

全局前置钩子与后置钩子

• 前置钩子

  router.beforeEach((to,from,next)=>{
      document.title = to.matched[0].meta.title;
      next();
  })
  

• 后置钩子

  router.afterEach((to,from)=>{
      // 不需要调用next函数
      // ...
  })
  

路由独享的守卫

const routes = [
    {
        path: '/home',
        component: () => import('../views/Home.vue'),
        beforeEntry: (to, from, next) => {
            document.title = to.matched[0].meta.title;
            next();
        }
    }
]

组件内的守卫

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

7.keep-alive的使用

• 在keep-alive标签下加入需要保存状态的组件

      <keep-alive>
      <router-view></router-view>
      </keep-alive>
  

• 保存离开页面时地址的业务逻辑

  <script>
  export default {
  name: 'Home',
      data() {
      return {
          path: '/home/news'
      }
      },
      //在组件活跃时跳转到path路径
      activated() {
          console.log('Home activated');
          this.$router.push(this.path);
      },
      //组件离开时保存路径
      beforeRouteLeave (to, from, next) {
      this.path = this.$route.path;
      next();
      }
  }
  </script>
  

keep-alive属性

• include:字符串或正则表达，只有匹配的组件才会被缓存
• exclude:字符串或正则表达，任何匹配的组件都不会被缓存
• 匹配name属性
  • App.vue

    <template>
    <div id="app">
        <keep-alive exclude="User">
        <router-view></router-view>
        </keep-alive>
    </div>
    </template>
    

  • User.vue

    <script>
        export default {
            name: 'User',
            computed: {
                userId(){
                    return this.$route.params.userId;
                }
            }
        }
    </script>