复习vue(13)路由「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」。插槽 slot

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」。

插槽 slot

插槽是什么?

当引用组件时,我们可以想组件的标签中嵌入内容.这些内容可以嵌入到子组件中,但是需要使用插槽机制即可;

如何使用插槽
- 首先在创建子组件时需要声明一个 slot 标签占位
- 在组件标签中嵌入内容
具名slot和匿名slot
- 匿名slot,在声明slot时不写name属性,嵌入在组件标签中没有写slot 属性的标签都会放在匿名 slot 中
- 具名slot,在声明slot时要写上name属性;嵌入在组件标签中的内容需要指定 slot="slot的名字"
代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <div id="app">
    
    <panel>
      <div>这是默认的内容</div>
      <p>hahahah </p>
      <div slot="header">这是个头</div>
      <div slot="body">主体</div>
      <div slot="footer">尾部</div>
    </panel>
  </div>

  <template id="tpl">
    <div>
      <slot></slot>
      <slot name="header"></slot>
      <slot name="body"></slot>
      <slot name="footer"></slot>
    </div>
  </template>

  <script src="vue.js"></script>
  <script>
    let panel = {
      template: '#tpl',
      data() {
        return {
          x: 1
        }
      }
    };

    let vm = new Vue({
      el: '#app',
      data: {},
      components: {
        panel
      }
    });

	// 如果要想子组件中嵌入内容，需要使用插槽 slot；并且需要在子组件中提前用 slot 标签占位；
	// slot 分为匿名 slot 和具名 slot
  </script>

</body>

</html>

Vue 的路由 vue-router

路由和前端路由
- 路由: 根据不同路径,执行不同操作;
- 前端路由: 单页面应用中由前端控制 url,实现页面的切换效果(其实是在切换组件);

vue-router 实现页面的切换.单页面应用(SPA)页面切换页面的效果是通过在一个页面内,根据不同的url切换不同的组件实现的;

使用 `vue-router`

使用 vue-router 需要使用以下组件:

<router-link to="home" tag="button">首页</router-link> 是一个自定义标签,用于切换路由,点击他页面的url会切换,如果有匹配的组件,会把组件渲染到router-view;
<router-view></router-view> 用于展示当前路由对应的组件;
配置路由映射表,即路由和组件的对应关系;
创建 vue-router 实例
给 Vue 实例配置 router 属性

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <div>
      <router-link to="home" tag="button">首页</router-link>
      <router-link to="list" tag="button">列表</router-link>
      <!--to 是 router-link 的一个必须属性-->
      <!--router-link 是一个自定义标签，用于切换路由-->
      <!--router tag 属性，属性值是一个标签名，会把 router-link 解析成一个对应的标签-->
    </div>
    <!--router-view 是一个全局组件，用于显示当前路由对应的组件内容-->
    <router-view></router-view>
  </div>


  <script src="vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script>
    // 路由：根据不同路径，执行不同操作；
    // 前端路由：单页面应用中由前端控制url，实现页面的切换（其实是在切换组件）；

    // vue-router 实现页面的切换，单页面应用（SPA）页面切换页面的效果是通过在一个页面内，根据不同的 url 切换不同的组件实现的；

    // 1. 创建组件
    // 2. 配置路由映射表
    // 3. 把路由映射表传给 VueRouter 进行注册；

    let home = {
      template: '<div>首页</div>'
    };

    let list = {
      template: '<div>列表页</div>'
    };

    // 配置路由映射表
    let routes = [
      {
        path: '/',
        component: home
      },
      {
        path: '/home',
        component: home
      },
      {
        path: '/list',
        component: list
      },
      {
        path: '*',
        component: home
      }
    ];

    let router = new VueRouter({
      routes
    });

    let vm = new Vue({
      el: '#app',
      data: {},
      router
    })


  </script>
</body>

</html>

路由方法

除了使用 router-link 切换路由, vue-router 换提供了对应的方法用于切换路由;

常用的路由方法:
1. this.$router.go(-1) 回退到上一页
2. this.$router.push(router|router-config) 跳转到指定路由

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <div>
      <router-link to="home" tag="button">首页</router-link>
      <router-link to="list" tag="button">列表</router-link>
      <!--to 是 router-link 的一个必须属性-->
      <!--router-link 是一个自定义标签，用于切换路由-->
      <!--router tag 属性，属性值是一个标签名，会把 router-link 解析成一个对应的标签-->
    </div>
    <!--router-view 是一个全局组件，用于显示当前路由对应的组件内容-->
    <router-view></router-view>
  </div>


  <script src="vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script>
    // 路由：根据不同路径，执行不同操作；
    // 前端路由：单页面应用中由前端控制url，实现页面的切换（其实是在切换组件）；

    // vue-router 实现页面的切换，单页面应用（SPA）页面切换页面的效果是通过在一个页面内，根据不同的 url 切换不同的组件实现的；

    // 1. 创建组件
    // 2. 配置路由映射表
    // 3. 把路由映射表传给 VueRouter 进行注册；

   let home = {
      template: `<div>首页 <button @click="fn">去列表页</button></div>`,
      methods: {
        fn() {
          // this.$router.push() 跳转到指定路由

          this.$router.push('/list');
        }
      }
    };

    let list = {
      template: `<div>列表页 <button @click="goBack">返回</button></div>`,
      methods: {
        goBack() {
          // 返回上一个页面
          this.$router.go(-1);
        }
      }
    };

    // 配置路由映射表
    let routes = [
      {
        path: '/',
        component: home
      },
      {
        path: '/home',
        component: home
      },
      {
        path: '/list',
        component: list
      },
      {
        path: '*',
        component: home
      }
    ];

    let router = new VueRouter({
      routes
    });

    let vm = new Vue({
      el: '#app',
      data: {},
      router
    })


  </script>
</body>

</html>

复习vue(13)路由

插槽 slot

Vue 的路由 vue-router

使用 vue-router

路由方法

使用 `vue-router`