学习笔记-Vue 的 slot 和router

LearnTech_123

已于 2024-07-26 23:39:06 修改

阅读量593

点赞数 7

文章标签： vue.js 学习笔记

于 2024-07-25 18:11:12 首次发布

本文链接：https://blog.csdn.net/LearnTech_123/article/details/140680155

版权

前面的问题

1. vue实例能不能嵌套一个vue实例

可以，但是不建议，因为用不了嵌套的实例，vue 执行的SAP 技术，如果需要一个页面多个实例，可以把其他的实例作为组件使用

局部组件

在vue实例中使用，可以有多个局部组件，但只能在声明的 vue 实例中使用，其他的实例用不了

使用组件

插槽 slot

1. 默认插槽

如果想在组件里添加一些内容怎么办呢？这就可以使用到插槽技术了

2. 具名插槽

如果需要在组件中有多个预留位置，你可以给每个 <slot> 标签添加一个 name 属性，如 <slot name="header">。

在使用插槽时需要和 template 标签结合使用

3. 作用域插槽

插槽怎么传参呢？

1. v-slot 命令结合具名插槽的方式

2. slot-scope 方式

slot-scope是Vue 2.x的语法，而v-slot是Vue 3.x的语法。
slot-scope通常与<template>标签一起使用，而v-slot可以与任何元素一起使用。

路由

之前：

多个页面：登录页面，注册页面，个人中心页面等等

现在：

单个页面：一个入口页面，

多组件：登录组件，注册组件等等

那这么多组件怎么协调呢？使用路由进行协调

一、路由场景

二、路由实现

主页面

许多的路由组件

路由器

router-view：显示路由组件

1. 创建组件

2. 创建路由器

表示使用 URL 的 hash 模式来实现前端路由。这意味着在浏览器地址栏中看到的 URL 将带有 "#" 符号，如：`http://example.com/#/login`。

设置 mode 为 "history" 时，它会使用 HTML5 的 History API 来实现无刷新的页面跳转。与 "hash" 模式不同，"history" 模式下的 URL 不包含 # 字符，看起来更像传统的服务器端路由 URL，例如 http://example.com/login 而不是 http://example.com/#/login。

3. 创建主页面

4. 引入路由模块

5. 挂载路由器

6. 创建router-view

三、路由跳转

1. 通过操作 URL 跳转

2. 通过点击跳转组件

在登录组件添加方法

带参数的跳转

var loginView = {
    template:`
        <div >
            <h1>
            <el-button @click="login">登录</el-button>
            </h1>
        </div>
    `,
    methods: {
        login(){
            /* this.$router.push({name:"register"}) */
            // get 方式跳转
            this.$router.push({
                path:"/register",
                query:{
                    name:"张三",
                    age:18
                }
            })
        }
    },
}

login(){
    // post 方式跳转
    this.$router.push({
        name:"register",
        params:{
            name:"张三",
            age:18
        }
    })
}

打印当前路由信息

GET跳转方式

POST 跳转方式

3. 通过 router-link 跳转

点击 “登录” 文本时，Vue Router 会根据配置将视图切换到与 `"login"` 路由相关的组件，实现页面的局部更新。

<style>
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
      
      .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
      }
      
      .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
      }
      
      body > .el-container {
        margin-bottom: 40px;
      }
      
      .el-container:nth-child(5) .el-aside,
      .el-container:nth-child(6) .el-aside {
        line-height: 260px;
      }
      
      .el-container:nth-child(7) .el-aside {
        line-height: 320px;
      }
    </style>

点击登录按钮后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <h1>主页面</h1>
        <el-container>
          <el-header>Header</el-header>
          <el-container>
            <el-aside width="200px">
              Aside
              <router-link to="login">  <!-- 跳转到 login 路由 -->
                  <div>登录</div>
              </router-link>
              <router-link to="register">
                  <div>注册</div>
              </router-link>
          </el-aside>
            <el-container>
              <el-main>
                  Main
                  <router-view ></router-view>
              </el-main>
              <el-footer>Footer</el-footer>
            </el-container>
          </el-container>
        </el-container>


    </div>

    <script src="../static/js/vue.js"></script>
    <script src="../static/js/vue-router.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="../view/LoginView.js"></script>
    <script src="../view/RegisterView.js"></script>

    <script src="../router/index.js"></script>

    <style>
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
      
      .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
      }
      
      .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
      }
      
      body > .el-container {
        margin-bottom: 40px;
      }
      
      .el-container:nth-child(5) .el-aside,
      .el-container:nth-child(6) .el-aside {
        line-height: 260px;
      }
      
      .el-container:nth-child(7) .el-aside {
        line-height: 320px;
      }
    </style>

    <script>
        new Vue({
            el:"#app",
            router  // router:router  // 挂载路由器
        })
    </script>
</body>
</html>