Vue入门6、插槽（自定义分发）+router-view+重定向+嵌套路由

最新推荐文章于 2024-04-24 08:36:32 发布

舌尖上的蛋炒饭

最新推荐文章于 2024-04-24 08:36:32 发布

阅读量1.2k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq13933506749/article/details/119764296

版权

Vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

Vue入门6、插槽（自定义分发）+router-view+重定向+嵌套路由

项目沿用Vue入门5的项目，/views/Four.vue

插槽（自定义分发）

我们先来想想一个场景
我们的

和

标签里的内容是从服务器里来的，不想写死

<template>
<div class="four">
    <h1>hello</h1>
    <el-row>
  <!--将函数绑定在了一个按钮上-->
  <el-button type="primary" v-on:click="tuanyou(1,2)">主要按钮</el-button>
  <!--使用kuaidian()调用函数-->
  <el-button type="warning" plain v-on:click="kuaidian()">警告按钮</el-button>
  <!--使用kuaidian调用函数-->
  <el-button type="danger" plain v-on:click="kuaidian">警告按钮</el-button>
</el-row>
    <span>{{nenglian}}</span>
    <p>百家姓</p>
    <ul>
        <li>赵</li>
        <li>钱</li>
        <li>孙</li>
    </ul>
</div>
</template>
<script>
export default {
    name: 'Four',
    data(){
        return{
            msg:'法外狂徒：张三'
        }
    },
    methods:{
        //tuanyou即为这个函数的名字，function标明了这是一个方法。(x,y)说明需要两个参数
        tuanyou:function(x,y){
            alert(x+y)
        },
        //定义一个不需要参数的函数
        kuaidian:function(){
            alert("hello kuaidian")
        }
    },
    created(){
        window.four=this
    },
    computed:{
        nenglian:function(){
            this.msg;
            return Date.now();
        }
    }
}
</script>
<style>

</style>

1、components下新建baijiaxing.vue

<template>
    <div>
        <slot></slot>
        <ul>
            <slot></slot>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'baijiaxing'
}
</script>
<style scoped>

</style>

2、components下新建baijiaxingtitle.vue

<template>
<div>
    <p>{{title}}</p>
</div>
</template>
<script>
export default {
    name: 'baijiaxingtitle',
    props:['title']
}
</script>
<style scoped>

</style>

3、components下新建baijiaxingul.vue

<template>
<li>{{item}}</li>
</template>
<script>
export default {
    name: 'baijiaxingul',
    props:['item']
}
</script>
<style scoped>

</style>

4、我们已经定义好两个插槽的名字了，回到baijiaxing.vue将name属性加进去

这一步一定要加，我尝试过不加行不行，结论是不行

<template>
    <div>
        <slot name="baijiaxingtitle"></slot>
        <ul>
            <slot name="baijiaxingul"></slot>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'baijiaxing'
}
</script>
<style scoped>

</style>

5、在父组件中添加内容

<template>
<div class="four">
    <h1>hello</h1>
    <el-row>
  <!--将函数绑定在了一个按钮上-->
  <el-button type="primary" v-on:click="tuanyou(1,2)">主要按钮</el-button>
  <!--使用kuaidian()调用函数-->
  <el-button type="warning" plain v-on:click="kuaidian()">警告按钮</el-button>
  <!--使用kuaidian调用函数-->
  <el-button type="danger" plain v-on:click="kuaidian">警告按钮</el-button>
</el-row>
    <span>{{nenglian}}</span>
<!--1、baijiaxing，是因为他是一个组件，所以可以这样使用，请先编写这里，然后自动生成import，如果手动import再写这里，就可能会明明导入了，却报错未导入-->
<baijiaxing>
    <baijiaxingtitle slot="baijiaxingtitle" v-bind:title="titleone"></baijiaxingtitle>
    <!--v-bind，前面是子组件的内容，后面是父组件的内容-->
    <baijiaxingul slot="baijiaxingul" v-for="(item,index) in items" v-bind:key="index" v-bind:item="item"></baijiaxingul>
</baijiaxing>
</div>
</template>
<script>
import baijiaxing from '../components/baijiaxing.vue'
import Baijiaxingtitle from '../components/baijiaxingtitle.vue'
import Baijiaxingul from '../components/baijiaxingul.vue'

export default {
  components: { baijiaxing, Baijiaxingtitle, Baijiaxingul },
    name: 'Four',
    data(){
        return{
            msg:'法外狂徒：张三',
            //数据从哪里来呢？在父组件中定义
            titleone : '百家姓',
            items:['赵','钱','孙']
        }
    },
    methods:{
        //tuanyou即为这个函数的名字，function标明了这是一个方法。(x,y)说明需要两个参数
        tuanyou:function(x,y){
            alert(x+y)
        },
        //定义一个不需要参数的函数
        kuaidian:function(){
            alert("hello kuaidian")
        }
    },
    created(){
        window.four=this
    },
    computed:{
        nenglian:function(){
            this.msg;
            return Date.now();
        }
    }
}
</script>
<style>

</style>

路由嵌套

我们新建一个views/User.vue

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在这里展示视图-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "user"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

由于我们这个User.vue下用了

这个scss是CSS预处理器，至于是个啥玩儿意，我也不清楚，这是搜出来的定义：

CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

所以我们要下载

npm i node-sass -D

npm i sass-loader -D

views下新建文件夹user
新建/views/user/profile

<template>
    <div>
        <h1>用户信息</h1>
    </div>
</template>
<script>
export default {
    name: 'profile'
    
}
</script>
<style scoped>

</style>

新建/views/user/list

<template>
    <div>
        <h1>用户列表</h1>
    </div>
</template>
<script>
export default {
    name: 'list'
    
}
</script>
<style scoped>

</style>

将页面全部加入到router/index.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
//  首先将页面导入进来
import Main from '../views/Main'
import Four from '../views/Four'
import user from '../views/User'
import List from '../views/user/list'
import Profile from '../views/user/profile'

Vue.use(VueRouter)

const routes = [
  {
    //  标识一下路径
    path: '/main',
    //  组件就是我们刚刚引入的Main
    component: Main,
    //  name，就是起个名字，可有可无
    name: Main
  },
  {
    path:'/four',
    component: Four,
    name: Four
  },
  {
    path:'/user',
    component: user,
    name: user,
    children:[
      {
        path:'/user/list',
        component: List,
        name: List
      },
      {
        path:'/user/profile',
        component: Profile,
        name: Profile
      }
    ]
  }
  

]

const router = new VueRouter({
  //将路由模式修改为history模式
  mode: 'history',
  routes
})

export default router

上面的children关键字就是嵌套路由的关键字。
但是启动项目会报下面的错

 ERROR  Failed to compile with 1 error                                                                                                                                      10:15:42 ├F10: AM┤

 error  in ./src/views/User.vue?vue&type=style&index=0&id=e0b47cf6&scoped=true&lang=scss&

TypeError: this.getOptions is not a function


 @ ./src/views/User.vue?vue&type=style&index=0&id=e0b47cf6&scoped=true&lang=scss& 1:0-526 1:0-526
 @ ./src/views/User.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8090&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

原因百度出来说事sass版本太高了，我们就要降级一下

npm uninstall --save node-sass // 卸载
npm i node-sass@4.14.1 // 安装
npm uninstall --save sass-loader // 卸载
npm i -D sass-loader@8.x // 安装
// 如果node-sass安装失败，也可以直接在package.json中写上版本号，删除node_modules文件夹，重新npm i即可

结果图
我们点击不同的链接整体页面是不变的，变化的只是那么一部分，哪一部分呢，就是下一小节的router-view
在这里插入图片描述

router-view

我们嵌套路由的子页面，展示在哪里呢，在User.vue中有这么一段，其中，el-main就是elementui标识的主展示区域，就相当于一个页面有一个左边框，一个上边框，剩余的是主展示区域，router-view放在这里，就表示在el-main里展示路由的子页面的信息。

          <el-main>
          <!--在这里展示视图-->
            <router-view />
          </el-main>

重定向

在User.vue中新增一段

                <el-menu-item index="1-3">
                  <router-link to="/goHome">回到four页面</router-link>
                </el-menu-item>

在这里插入图片描述
在router/index.js中新增重定向路由

  {
    path:'/goHome',
    redirect:'/four'
  },

在这里插入图片描述
效果
点击回到four页链接

跳转到four页面

舌尖上的蛋炒饭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门6、插槽（自定义分发）+router-view+重定向+嵌套路由

Vue入门6、插槽（自定义分发）+router-view+重定向+嵌套路由项目沿用Vue入门5的项目，/views/Four.vue插槽（自定义分发）我们先来想想一个场景我们的和标签里的内容是从服务器里来的，不想写死<template><div class="four"> <h1>hello</h1> <el-row>  <el-button type="
复制链接

扫一扫