Vue2（四）动态组件 插槽 路由

<button @click="comName = 'Left'">展示 Left</button>
<button @click="comName = 'Right'">展示 Right</button>
<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <keep-alive include="Right，Left">
        <component :is="comName"></component>
      </keep-alive>
</div>

import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
  components: {
    // 如果在“声明组件”的时候，没有为组件指定 name 名称，则组件的名称默认就是“注册时候的名称”
    Left,
    Right
  }，
  data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left'
    }
  }
}

<!-- Left组件 -->

<div class="left-container">
    <h3>Left 组件</h3>

    <!-- 声明一个插槽区域 -->
    <!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->
    <!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->
    <slot>
    <!-- 当用户没有为插槽指定内容时，会展示该插槽后备内容 -->
      <h6>这是 default 插槽的后备内容</h6>
    </slot>
  </div>

    <div class="box" style="display: none;">
      <!-- 渲染 Left 组件 -->
      <Left>

        <template #default>
          <p>这是在 Left 组件的内容区域，声明的 p 标签</p>
        </template>
      </Left>
    </div>

<h3 v-color="'red'">Article 组件</h3>

    <!-- 文章的内容 -->
    <div class="content-box">
      <!-- 在封装组件时，为预留的 <slot> 提供属性对应的值 -->
      <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>

<Article>
  <template #content="scope">
     <p>{{ scope.msg }}</p>
     <p>{{ scope.user }}</p>
  </template>

<!-- 也可通过解构的方式，直接获取属性 #content="{{ msg, user }}" -->
</Article>

npm i vue-router@3.5.2 -S

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件

// 把 VueRouter 安装为 Vue 项目的插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
 
})

export default router

// 创建路由的实例对象
const router = new VueRouter({
 // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
})

// 需求：希望根据 id 的值，展示对应电影的详情信息
// 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
{ path: '/movie/:mid', component: Movie, props: true },

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
 // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
{
      path: '/about',
      component: About,
      children: [
        // 子路由规则
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
})

export default router

 this.$router.push('/home') 

this.$router.replace('/home') 

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next() //否则放行
  }
})