VUE-CLI学习第五天

  • 1.vue-cli打包文件解析
  • dist/js/xxx.js文件
  • 2.vue-router的路由懒加载
  • 3.嵌套路由
  • 父组件
  • 子组件(HomeNews子组件)
  • src/router/index.js文件
  • 4.传递参数
  • 1. params传参请参考第四天学习笔记
  • 2. query传参
  • 使用标签传参
  • 使用事件传参(接收参数页面与标签传参方法一致)
  • 5.\$router与\$route的区别
  • 6.全局导航守卫
  • 官方文档
  • 单独配置页面标题
  • 全局配置页面标题
  • 全局前置钩子与后置钩子
  • 路由独享的守卫
  • 组件内的守卫
  • 7.keep-alive的使用
  • keep-alive属性


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>{{$}}</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'
})
  • vue在使用includes时候需要导入什么包吗_Approute指向以下对象
const routes = [
    {
        path: '/',
        redirect:'/home'
    }
]

6.全局导航守卫

官方文档

单独配置页面标题

<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>