vue组件插槽，路由，生命周期，路由卫士

1.组件插槽

<!--App.vue-->
<template>
  <div id="app">
    <layout>
      <template v-slot:left><!--对应的组件插槽name-->
        <div class="left">左边</div>
      </template>
      <template v-slot:right><!--对应的组件插槽name-->
        <div class="right">右边</div>
      </template>
    </layout>
  </div>
</template>


<script>
import layout from "./components/layout";
export default {
  name: 'App',
  components: {
    layout
  }
}
</script>


<!--component/layout.vue-->
<template>
    <div>
        <div>这是头部</div>
        <div>
            <h1>这是左边</h1>
            <slot name="left"></slot><!--内容插入到的位置-->
        </div>
        <div>
            <h1>这是右边</h1>
            <slot name="right"></slot><!--内容插入到的位置-->
        </div>
        <div>尾部</div>
    </div>
</template>

2.路由

路由参考

2.1创建路由项目

路由默认使用 hash 模式（一般多个/#/在路径前面），使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。可以用路由的 history 模式，这种模式利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

vue create route

2.2手动创建选择router

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing

 ◯ E2E Testing

2.3创建后会多了个router文件夹，里面有index.js文件，配置路由

<!--导航-->
<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/zexin">zexin</router-link> |
      <router-link to="/article">article</router-link>
</div>
    <router-view/>

//定义路由router/index.js
{
    path: '/zexin',//浏览器访问的地址栏路径
    name: 'zexin',
    component: () => import('../views/zexin.vue')//导入组件的路径的参数
  }

2.4路由传参

配置动态路由

// router/index.js
{
    // 配置动态路由
    path: '/article/:id',//设置传入:id
    name: 'article',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/article.vue')
  }

<template>
    <div>
        <h1>这是新闻页</h1>
        <h2>新闻页ID：{{$route.params.id}}</h2><!--this组件对象的$route-->
    </div>
</template>

<script>
export default {
    mounted(){
        console.log(this);

    }
}
</script>

3.生命周期

<template>
    <div id="app">
        <h1>生命周期</h1>
        <input type="text" v-model="abc"><!--可以触发更新-->
    </div>
</template>

<script>
export default {
    data: function() {
        return {abc:1}
    },
    beforeCreate() {
        console.log('生命周期创建之前');
    },
    created() {
        console.log('生命周期创建之后');
    },
    beforeMount() {
        console.log('生命周期挂载之前');
    },
    mounted() {
        console.log('生命周期挂载之后');
    },
    beforeUpdate() {
        console.log('生命周期更新之前');
    },
    updated() {
        console.log('生命周期更新之后');
    },
    beforeDestroy() {
        console.log('生命周期销毁之前');
    },
    destroyed() {
        console.log('生命周期销毁之后');
    }
}
</script>

4.路由卫士

全局路由卫士

// router/index.js页面
router.beforeEach((to, from, next) => {//有三个参数
  console.log('路由卫士');
  console.log(to.path);
  
  if(to.path == '/weishi') {
    next('notAllow');
  }else {
    next()
  }
});

router.afterEach((to, from, next) => {
  console.log('路由卫士进入之后')
})

单页路由卫士

可以直接在组件里面写

<template>
    <div>欢迎进入路由卫士页面</div>
</template>

<script>
export default {
    beforeRouteEnter(to, from, next) {
        console.log('进入路由卫士');
        next()//允许进入当前跳转的页面
    },
    beforeRouteLeave(to, from, next) {
        console.log('离开路由卫士');
        next()//允许跳转离开后的页面
    }
}
</script>