首页 前端知识 第三部分 Vue讲解(22-25)(代码版)

第三部分 Vue讲解(22-25)(代码版)

2024-05-07 13:05:41 前端知识 前端哥 817 759 我要收藏

22.自定义指令

22.1 自定义指令基本语法

22.1.2 自定义指令.vue

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--自定义指令
自定义指令:自己定义的指令,可以封装一些dom操作,扩展额外功能
1.全局注册-语法(main.js中定义):
Vue.directive('指令名',{
  "inserted"(el){
    //可以对el标签,扩展额外功能
    el.focus()
  }
}
2.局部注册-语法:
directives:{
  "指令名":{
    inserted(){
      //可以对el标签,扩展额外功能
      el.focus()
    }
  }
}

自定义指令的使用:<input v-指令名 type="text">
-->

<!--自定义指令-指令的值
需求:实现一个color指令-传入不同的颜色,给标签设置文字颜色
语法:在绑定指令时,可以通过“等号”的形式为指令 绑定具体的参数值
<div v-color="color">内容</div>
通过binding.value可以拿到指令值,指令值修改会触发update函数
directives:{
  color:{
    inserted(el,binding){
      el.style.color=binding.value
    },
    update(el,binding){
      el.style.color=binding.value
    }
  }
}
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

22.1.2 App.vue

<template>
  <div>
    <h1 v-color="color1">自定义指令1</h1>
    <h1 v-color="color2">自定义指令2</h1>
    <input v-focus ref="inp" type="text">

  </div>
</template>

<script>
export default {
  //1.全局注册指令
  /*mounted(){
    this.$refs.inp.focus()
  }*/

//  2.局部注册指令
  directives:{
    //指令名:指令的配置项
    focus:{
      inserted(el){
        el.focus()
      }
    },
    color:{
      //1.inserted提供的是元素被添加到页面中时的逻辑
      inserted(el,binding){
        // console.log(el);
        //binding.value就是指令的值
        el.style.color=binding.value
      },
    //  2.update指令的值修改时触发,提供值变化后,dom更新的逻辑
      update(el,binding){
        console.log("指令的值修改了")
        el.style.color=binding.value
      }
    }
  },
  data(){
    return{
      color1:"red",
      color2:"orange"
    }
  }
}
</script>

<style>
</style>

22.2 自定义指令(v-loading指令封装)

22.2.1 自定义指令

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--自定义指令:v-loading指令封装
场景:实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态=>用户体验不好
需求:封装一个v-loading指令,实现加载中的效果
分析:(1)本质loading效果就是一个蒙层,盖在了盒子上;
     (2)数据请求中,开启loading状态,添加蒙层;
     (3)数据请求完毕,关闭loading状态,移除蒙层;
实现:(1)准备一个loading类,通过伪元素定位,设置宽高,实现蒙层;
     (2)开启关闭loading状态(添加移除蒙层),本质只需要添加移除类即可;
     (3)结合自定义指令的语法及逆行封装复用;
.loading:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#fff url("./loading.gif") no-repeat center;
}
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

22.2.2 App.vue

<template>
  <div class="box" v-loading="isloading">
    <ul>
      <li v-for="item in list" :key="item.id" class="news">
        <div class="left">
          <div class="title">{{ item.title }}</div>
          <div class="info">
            <span>{{ item.source }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
        <div class="right">
          <img :src="item.img" alt="">
        </div>
      </li>
    </ul>
  </div>
</template>
<!--
接口地址:http://hmajax.itheima.net/api/news
请求方式:get
-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
// import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      isloading: true
    }
  },
  async created() {
    //  1.发送请求获取数据
    const res = await axios.get("http://hmajax.itheima.net/api/news")
    setTimeout(() => {
      //  2.更新到 list 中,用于页面渲染v-for
      this.list = res.data.data
      this.isLoading = false
    }, 2000)
  },
  directives: {
    loading: {
      inserted(el, binding) {
        binding.value ? el.classList.add("loading") : el.classList.remove('loading')
      },
      update(el, binding) {
        binding.value ? el.classList.add("loading") : el.classList.remove('loading')
      }
    }
  }

}
</script>

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./img/loading.gif") no-repeat;
}
</style>

23.插槽

23.1 默认插槽

23.1.1 默认插槽

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--插槽-默认插槽
作用:让组件内部的一些结构支持自定义,只能够完成一个定制位置
需求:要在页面中显示一个对话框,封装成一个组件;
问题:组件的内容部分,不希望写死,希望能使用的时候自定义
插槽基本语法:
1.组件内需要定制的结构部门,改用<slot></slot>占位
2.使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot;
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

23.1.2 App.vue

<template>
  <div>
<!--    2.使用插槽:在使用标签内,填上插槽要添加的东西(可插入很多东西)-->
<!--     使用标签时,添加的内容将会填写到调用组件中的slot标签中-->
    <MyDialog>确定要删除吗?</MyDialog>
    <MyDialog>确定要退出系统吗?</MyDialog>
  </div>
</template>
<!--使用组件时
<MyDialog>你确定要退出本系统吗?</MyDialog>
此处的内容(你确定要退出本系统吗)就是要提交到<slot>插槽的位置
-->
<!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->

<script>
import MyDialog from "./components/MyDialog"

// import axios from 'axios'
export default {
  data() {
    return {}
  },
  components: {
    MyDialog
  }

}
</script>

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

23.1.3 MyDialog.vue

<template>
<div class="dialog">
<!--  头部-->
  <div class="dialog-header">
    <h3>友情提示</h3>
    <span class="close">X</span>
  </div>

<!--  主体-->
  <div class="dialog-content">
    <!--      中间(此处)的内容需要定制-->
<!--   1.在需要定制的位置,使用slot占位 -->
    <slot></slot>

  </div>

<!--  尾部-->
  <div class="dialog-footer">
    <button>取消</button>
    <button>确认</button>
  </div>
</div>
</template>

<script>
export default {
  name: "MyDialog"
}
</script>

<style scoped>

</style>

23.2 后备内容(插槽默认的内容)

23.2.1 后备内容

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--
通过插槽完成了内容的定制,传什么显示什么,如果不传,则是空白
插槽后备内容:封装组件时,可以为预留的`<slot>`插槽提供后备内容(默认内容)
语法:在<slot>标签内,放置内容,作为默认显示内容
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

23.2.2 App.vue

<template>
  <div>
<!--    2.使用插槽:在使用标签内,填上插槽要添加的东西(可插入很多东西)-->
<!--     使用标签时,添加的内容将会填写到调用组件中的slot标签中-->
    <MyDialog>确定要删除吗?</MyDialog>
    <MyDialog>确定要退出系统吗?</MyDialog>
    <MyDialog></MyDialog>   <!--此处未传入值,则会显示插槽默认的内容-->
  </div>
</template>
<!--使用组件时
<MyDialog>你确定要退出本系统吗?</MyDialog>
此处的内容(你确定要退出本系统吗)就是要提交到<slot>插槽的位置
-->
<!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->

<script>
import MyDialog from "./components/MyDialog"

// import axios from 'axios'
export default {
  data() {
    return {}
  },
  components: {
    MyDialog
  }

}
</script>

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

23.2.3 MyDialog.vue

<template>
<div class="dialog">
<!--  头部-->
  <div class="dialog-header">
    <h3>友情提示</h3>
    <span class="close">X</span>
  </div>

<!--  主体-->
  <div class="dialog-content">
    <!--      中间(此处)的内容需要定制-->
<!--   1.在需要定制的位置,使用slot占位,在slot占位符中添加的内容就是默认显示内容(当在调用该插槽时,无内容,则将显示该后备内容,否则,显示添加的内容) -->
    <slot>后备内容</slot>

  </div>

<!--  尾部-->
  <div class="dialog-footer">
    <button>取消</button>
    <button>确认</button>
  </div>
</div>
</template>

<script>
export default {
  name: "MyDialog"
}
</script>

<style scoped>

</style>

23.3 具名插槽

23.3.1 具名插槽

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--具名插槽(就是有具体名字的插槽)
需求:一个组件内有多处结构,需要外部传入标签,进行定制
具名插槽语法:
 1.多个slot使用name属性区分名字,name对应的数据就相当于每个插槽的具体唯一名字
 例如:<div class="dialog-header">
        <slot name="head"></slot>
      </div>
      <div class="dialog-content">
        <slot name="content"></slot>
      </div>
      <div class="dialog-footer">
        <slot name="footer"></slot>
      </div>

 2.template配合v-slot:名字来分发对应标签
 例如:<MyDialog>
        <template v-slot:head>
          大标题
        </template>
        <template v-slot:content>
           内容文本
        </template>
        <template v-slot:footer>
          <button>按钮</button>
        </template>
      </MyDialog>

3.v-slot:插槽名  可以简化为 #插槽名
     <MyDialog>
        <template #head>
          大标题
        </template>
        <template #content>
           内容文本
        </template>
        <template #footer>
          <button>按钮</button>
        </template>
      </MyDialog>
-->
<!--
注意:一旦插槽有了名字,就是具名插槽,只支持定向分发
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

23.3.2 App.vue

<template>
  <div>
    <!--    2.使用插槽:在使用标签内,填上插槽要添加的东西(可插入很多东西)-->
    <!--     使用标签时,添加的内容将会填写到调用组件中的slot标签中-->
    <!--    <MyDialog>确定要删除吗?</MyDialog>
        <MyDialog>确定要退出系统吗?</MyDialog>
        <MyDialog></MyDialog>-->   <!--此处未传入值,则会显示插槽默认的内容-->
    <MyDialog>
      <!--      需要通过template包裹分发的结构,包成一个整体-->
      <template #head>
        <div>大标题</div>
      </template>

      <template #content>
        <div>内容文本</div>
      </template>

      <template #footer>
        <template>
          <button>确认</button>
          <button>取消</button>
        </template>
      </template>
    </MyDialog>
  </div>
</template>
<!--使用组件时
<MyDialog>你确定要退出本系统吗?</MyDialog>
此处的内容(你确定要退出本系统吗)就是要提交到<slot>插槽的位置
-->
<!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->

<script>
import MyDialog from "./components/MyDialog"

// import axios from 'axios'
export default {
  data() {
    return {}
  },
  components: {
    MyDialog
  }

}
</script>

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

23.3.3 MyDialog.vue

<template>
  <div class="dialog">
    <!--  头部-->
    <div class="dialog-header">
      <slot></slot>
    </div>

    <!--  主体-->
    <div class="dialog-content">
        <slot name="content"></slot>
    </div>

    <!--  尾部-->
    <div class="dialog-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyDialog"
}
</script>

<style scoped>

</style>

23.4 作用域插槽

23.4.1 作用域插槽

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--作用域插槽:是插槽的一个传参语法-->
<!--作用域插槽:定义slot插槽的同时,是可以传值的,给插槽上可以绑定数据,将来使用组件时可以使用-->
<!--场景:封装表格组件
1.父传子,动态渲染表格内容;
2.利用默认插槽,定制操作列;
3.删除或查看都要用到当前项的id,属于组件内部的数据;
通过作用域插槽传值绑定,进而使用
-->
<!--作用域插槽基本使用步骤:
1.给slot标签,以添加属性的方式传值
  <slot :id="item.id" msg="测试文本"></slot>
2.所有添加的属性,都会被收集到一个对象中
  {id:3,msg:"测试文本"}
3.在template中,通过'#插槽名=“obj”'接收调用此插槽时发送的数据,默认插槽名为default
<MyTable :list='list'>
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>
  -->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

23.4.2 App.vue

<template>
  <div>
    <MyTable :data="list">
<!--      3.通过template #插槽名=“变量名”,接收-->
<!--      obj:就是接收来自MyTable组件的对象数据-->
      <template #default="obj">
        {{obj}}
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>

    <MyTabe :data="list2">
      <template #default="{row}">

        <button @click="show(row)">查看</button>
      </template>
    </MyTabe>
  </div>
</template>
<!--使用组件时
<MyDialog>你确定要退出本系统吗?</MyDialog>
此处的内容(你确定要退出本系统吗)就是要提交到<slot>插槽的位置
-->
<!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->

<script>
import MyTable from "./components/MyTable"
export default {
  data() {
    return {
      list: [
        {id: 1, name: "yuer", age : 18},
        {id: 2, name: "yuer2", age : 19},
        {id: 3, name:"yuer3", bag :17},
      ],
      list2: [
        {id: 1, name: "yuer", age : 18},
        {id: 2, name: "yuer2", age : 19},
        {id: 3, name:"yuer3", bag :17},
      ]
    }
  },
  methods:{
    del(id){
      this.list=this.list.filter(item=>item)
    },
    show(row){
      console.log(row);
    }
  },
  components: {
    MyTable
  }

}
</script>

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

23.4.3 MyTable.vue

<template>
  <div>
    <tr v-for="(item,index) in data" :key="item.id">
      <td>{{ index + 1 }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>
<!--        1.给slot标签,添加属性的方式传值-->
        <slot :row="item" msg="测试数据"></slot>

<!--        2.将所有的属性,添加到一个对象中-->
<!--        {
              row:{id:2,name:'yuer',age:18},
              msg:{"测试文本"}
}-->
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  name: "MyDialog"
}
</script>

<style scoped>
</style>

24.路由

24.1 单页应用程序&路由简单介绍

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--单页应用程序-->
<!--单页应用程序:SPA-Single Page Application:指的是 所有功能 在一个html页面上实现-->
<!--例如:网易云音乐https://music.163.com/(单页面应用:整个导航没变化)-->
<!--例如:京东、淘宝等(多页面应用:导航栏发生变化)-->
<!--单页面应用 VS 多页面应用-->
<!--
开发分类   实现方式       页面性能        开发效率   用户体验   学习成本   首屏加载  SEO(搜索引擎优化)
单页      一个html页面   按需更新性能高      高      非常好      高       慢      差
多页      多个html页面   整页面更新性能低    中等     一般       中等      快      优
-->
<!--单页面、多页面应用的适用:
单页面(vue):系统类网站/内部网站/文档类网站/移动端站点
多页面:公司官网/电商类网站
-->
<!--单页面应用程序,之所以开发效率高,性能高,用户体验的的原因是:页面是按需更新的
要按需更新,首先就需要明确:访问路径和组件的对应关系
访问路径和组件的对应关系如何确定呢?路由
-->

<!--路由:
生活中的路由:设备和ip的映射关系(路由器)
Vue中的路由:路径和组件的映射关系
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

24.2 VueRouter的介绍

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--VueRouter的介绍
目标:1.认识vue提供的路由插件:VueRouter;
     2.掌握VueRouter的基本使用步骤;
作用:修改地址栏路径时,切换显示匹配的组件;
说明:Vue官方的一个路由插件,是一个第三方包;
官网:https://v3.router.vuejs.org/zh/
-->
<!--VueRouter的使用步骤(5+2)
1.前5步基础步骤:初始化步骤(固定)
(1)下载:idea打开项目终端下载VueRouter模块到当前工程,版本3.6.5(vue2);
 yarn add vue-router@3.6.5 或 pnpm install vue-router@3.6.5(注:查看vue路由版本的指令:pnpm list vue-router)
(2)引入;
 import VueRouter from 'vue-router'

(3)安装注册(插件的初始化);
 Vue.use(VueRouter)
 (注:vue相关插件的使用都需要进行安装注册)
(4)创建路由对象;
 const router=new VueRouter()
 (注:此时创建的vue实例和任何事件都没有关系)

(5)注入,将路由对象注入到new Vue实例中,建立关联;
 new Vue({
  render:h=>h(App),
  router
 }).$mount('#app')

 注意:当完成前5步基础步骤时,地址栏中就会自动加一个#/,说明此时,被路由所管理

2.后2步核心步骤
(1)创建需要的组件(views目录---视图),配置路由规则(路径组件的匹配关系);
   1)新的.vue文件(需要放在views目录(视图)中)
       Find.vue/My.vue/Friend.vue
       在main.js中导入该vue文件
(2)配置导航,配置路由出口router-view(路径匹配的组件显示的位置);

-->
<!--  Vue2 和 Vue3 对应的路由插件使用
2(Vue2) 3(VueRouter3.x) 3(Vuex3.x)
3(Vue3) 4(VueRouter4.x) 4(Vuex4.x)
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

24.3 组件存放目录问题

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--
路由相关的组件,为什么要放在views目录中呢?
组件分类:.vue文件分为2类(页面组件 & 复用组件),(注意:.vue文件本质无区别)
(1)页面组件:放在views目录中
(2)复用组件:放在components目录中
组件分类后,更易维护
(1)src/views文件夹
     页面组件:页面展示,配合路由使用
(2)src/components文件夹
     复用组件:展示数据,常用于封装复用
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>
</style>

24.4 VueRouter的完整实现步骤

24.4.1 main.js

import Vue from 'vue'
import App from './App.vue'

//路由的使用步骤(5+2)
//5个基础步骤:

//1.下载(版本):项目终端中下载
//2.引入;
import VueRouter from "vue-router";

import Find from "./views/Find.vue"
import My from "./views/My.vue"
import Friend from "./views/Friend.vue"

//3.安装注册 (Vue.use(vue相关的插件))
Vue.use(VueRouter)   //将VueRouter 放到use()内,实则会实现VueRouter发生初始化变化
//4.创建路由对象(router可以是其他名字,但要new Vue中与其对应)
// const router=new VueRouter()
const r = new VueRouter({
        //核心步骤1:创建需要的组件(views目录),配置路由规则们(多个路由规则)
        //routes:路由规则们
        //route:一条路由规则{path:路径,component:组件}
        routes: [
            {path: "/find", component: Find},  //每条规则(地址栏路径(path)和组件(component)的对应)
            {path: "/my", component: My},
            {path: "/friend", component: Friend},
        ]
    }
)
//5.注入new Vue中,建立关联


Vue.config.productionTip = false
//5.将插件对象注入到new Vue实例中
new Vue({
    render: h => h(App),
    // router   //当路由对象名和router相同时,可简写成router
    router: r   //当路由对象名和router不同时,需要对应路由对象名
}).$mount('#app')

24.4.2 App.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>

    <div class="top">
      <!--      路由出口: 该标签是用来控制组件所展示的位置-->
      <!--      该标签也是vue内部的标签,当该标签的位置决定着组件的位置(该标签放在哪里,组件就在哪里显示)/-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
</style>

24.4.3 Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: "FindMusic"   //此处是因为eslint的命名规范,组件名必须要至少两个单词命名,故此处的name的值是由多个单词组成
}
</script>

<style scoped>

</style>

24.4.4 My.vue

<template>
<div>
  <p>我的歌单</p>
  <p>我的歌单</p>
  <p>我的歌单</p>
</div>
</template>

<script>
export default {
  name: "MyMusic"  //此处是因为eslint的命名规范,组件名必须要至少两个单词命名,故此处的name的值是由多个单词组成
}
</script>

<style scoped>

</style>

24.4.5 Friend.vue

<template>
<div>
  <p>朋友歌单</p>
  <p>朋友歌单</p>
  <p>朋友歌单</p>
</div>
</template>

<script>
export default {
  name: "FriendMusic"  //此处是因为eslint的命名规范,组件名必须要至少两个单词命名,故此处的name的值是由多个单词组成
}
</script>

<style scoped>

</style>

总结:
路由的使用步骤(5+2)
5步基础步骤:
(1)项目终端中下载
(2)(3)(4)(5)在main.js文件中实现
2步核心步骤:
(1)创建子组件vue文件,在main.js文件中导入,并将这些文件和路径地址进行匹配;
(2)在根组件中使用这些子组件,App.js文件

25.路由进阶

25.1 路由的封装抽离

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--路由的封装抽离
问题:所有的路由配置都堆在main.js中合适吗?
目标:将路由模块抽离出来;
好处:拆分模块,利于维护;
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

25.1.1 router目录—index.js(路由的封装)

//存放路由规则,在使用路由规则时,只需导入该规则即可
// 核心步骤:(1)创建router目录下的index.js文件;(2)将配置的路由相关内容存放在该文件中,之后在main.js中直接导入该index.js文件即可
//路由的使用步骤(5+2)
//5个基础步骤:

//路由的使用步骤(5+2)
//5个基础步骤:

//1.下载(版本):项目终端中下载
//2.引入;
import Vue from 'vue'
import VueRouter from "vue-router";
//找文件时,推荐使用绝对路径,使用@标识符代表标识路径
//@代表src目录

// import Find from "../views/Find.vue"
// import My from "../views/My.vue"
// import Friend from "../views/Friend.vue"
import Find from "@/views/Find"
import My from "@/views/My"
import Friend from "@/views/Friend"

//3.安装注册 (Vue.use(vue相关的插件))
// eslint-disable-next-line no-undef
Vue.use(VueRouter)   //将VueRouter 放到use()内,实则会实现VueRouter发生初始化变化
//4.创建路由对象(router可以是其他名字,但要new Vue中与其对应)
// const router=new VueRouter()
const router = new VueRouter({
        //核心步骤1:创建需要的组件(views目录),配置路由规则们(多个路由规则)
        //routes:路由规则们
        //route:一条路由规则{path:路径,component:组件}
        routes: [
            {path: "/find", component: Find},  //每条规则(地址栏路径(path)和组件(component)的对应)
            {path: "/my", component: My},
            {path: "/friend", component: Friend},
        ]
    }
)

//导出router
export default router

25.1.2 main.js 导入封装路由

import Vue from 'vue'
import App from './App.vue'

//导入indext.js中的router
import router from './router/index'

Vue.config.productionTip = false
//5.将插件对象注入到new Vue实例中
new Vue({
    render: h => h(App),
    router   //当路由对象名和router相同时,可简写成router
    // router: r   //当路由对象名和router不同时,需要对应路由对象名
}).$mount('#app')

25.1.3 App.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>

    <div class="top">
      <!--      路由出口: 该标签是用来控制组件所展示的位置-->
      <!--      该标签也是vue内部的标签,当该标签的位置决定着组件的位置(该标签放在哪里,组件就在哪里显示)/-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
</style>

25.1.4 Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: "FindMusic"   //此处是因为eslint的命名规范,组件名必须要至少两个单词命名,故此处的name的值是由多个单词组成
}
</script>

<style scoped>

</style>

25.1.5 Friend.vue

<template>
<div>
  <p>朋友歌单</p>
  <p>朋友歌单</p>
  <p>朋友歌单</p>
</div>
</template>

<script>
export default {
  name: "FriendMusic"  //此处是因为eslint的命名规范,组件名必须要至少两个单词命名,故此处的name的值是由多个单词组成
}
</script>

<style scoped>

</style>

25.1.6 My.vue

<template>
<div>
  <p>我的歌单</p>
  <p>我的歌单</p>
  <p>我的歌单</p>
</div>
</template>

<script>
export default {
  name: "MyMusic"  //此处是因为eslint的命名规范,组件名必须要至少两个单词命名,故此处的name的值是由多个单词组成
}
</script>

<style scoped>

</style>

25.2 使用router-link替代a标签实现高亮

25.2.1 使用router-link替代高亮

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--router-link 声明式导航-导航链接
需求:实现导航高亮效果
vue-router提供了一个全局组件router-link(取代a标签)
(1)能跳转,配置to属性指定路径(必须),本质还是a标签,to无需#
(2)能高亮,默认就会提供高亮类名,可以直接设置高亮样式,自带激活时的类名
-->

<!--router-link 声明式导航--默认提供两个类名
说明:我们发现router-link 自动给当前导航添加了两个高亮类名
(1)router-link-exact-active: 精确匹配
     to="/my"  只可以匹配  /my
(2)router-link-active: 模糊匹配(用的多)
     to="/my"  可以匹配 /my  /my/a  /my/b  ....,,
-->

<!--router-link 声明式导航--默认提供两个类名
说明:router-link的两个高亮类名太长了,我们希望能定制?
在index.js文件中重命名
const router=new VueRouter({
  router:[...],
  linkActiveClass:"类名1",  //类名1和类名2 是自定义的类名,激活时使用的是自定义类名
  linkExactActiveClass:"类名2"
})
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

25.2.2 index.js

//存放路由规则,在使用路由规则时,只需导入该规则即可
// 核心步骤:(1)创建router目录下的index.js文件;(2)将配置的路由相关内容存放在该文件中,之后在main.js中直接导入该index.js文件即可
//路由的使用步骤(5+2)
//5个基础步骤:

//路由的使用步骤(5+2)
//5个基础步骤:

//1.下载(版本):项目终端中下载
//2.引入;
import Vue from 'vue'
import VueRouter from "vue-router";
//找文件时,推荐使用绝对路径,使用@标识符代表标识路径
//@代表src目录

// import Find from "../views/Find.vue"
// import My from "../views/My.vue"
// import Friend from "../views/Friend.vue"
import Find from "@/views/Find"
import My from "@/views/My"
import Friend from "@/views/Friend"

//3.安装注册 (Vue.use(vue相关的插件))
// eslint-disable-next-line no-undef
Vue.use(VueRouter)   //将VueRouter 放到use()内,实则会实现VueRouter发生初始化变化
//4.创建路由对象(router可以是其他名字,但要new Vue中与其对应)
// const router=new VueRouter()
const router = new VueRouter({
        //核心步骤1:创建需要的组件(views目录),配置路由规则们(多个路由规则)
        //routes:路由规则们
        //route:一条路由规则{path:路径,component:组件}
        routes: [
            {path: "/find", component: Find},  //每条规则(地址栏路径(path)和组件(component)的对应)
            {path: "/my", component: My},
            {path: "/friend", component: Friend},
        ],
    //link自定义高亮类名
    linkActiveClass: 'active',  //模糊匹配类名
    linkExactActiveClass:'exact-active'   //精确匹配类名
    }
)

//导出router
export default router

25.2.3 main.js

import Vue from 'vue'
import App from './App.vue'

//导入indext.js中的router
import router from './router/index'

Vue.config.productionTip = false
//5.将插件对象注入到new Vue实例中
new Vue({
    render: h => h(App),
    router   //当路由对象名和router相同时,可简写成router
    // router: r   //当路由对象名和router不同时,需要对应路由对象名
}).$mount('#app')

25.2.4 App.vue

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐歌单</router-link>
      <router-link to="/my">我的歌单</router-link>
      <router-link to="/friend">朋友的歌单</router-link>
    </div>

    <div class="top">
<!--      路由出口: 该标签是用来控制组件所展示的位置-->
<!--      该标签也是vue内部的标签,当该标签的位置决定着组件的位置(该标签放在哪里,组件就在哪里显示)/-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
body{
  margin:0;
  padding:0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align:center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a{
  flex:1;
  text-decoration: none;
  padding:20px 0;
  line-height: 20px;
  background-color: #333;
  color:#ccc;
  border:1px solid black;
}
/*router-link-active:模糊匹配(常使用)
to="/find"  => 地址栏匹配  /find  /find/one  /find/two
*/
/*.footer_wrap a.router-link-active{
  background-color: purple;
}*/
/*对router-link默认自带的router-link-active类进行重命名*/
.footer_wrap a.active{
  background-color: purple;
}
/*
router-link-exact-active:精确匹配(不常使用)
to="/find"  => 地址栏匹配 /find
*/


/*.footer_wrap a.router-link-exact-active{
  background-color: purple;
}*/
/*对router-link默认自带的类router-link-exact-active进行重命名*/
/*.footer_wrap a.exact-active{
  background-color: purple;
}*/

.footer_wrap a:hover{
  background-color: #555;
}
</style>

子组件与上节相同

25.3 声明式导航-跳转传参

25.3.1 声明式导航-跳转传参

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--
目标:在跳转路由时,进行传值
(1)查询参数传参;
(2)动态路由传参;
-->
<!--(1)查询参数传参
1)语法格式如下:
  to="/path?参数名1=值&参数名2=值"
2)对应页面组件接收传递过来的值
  $route.query.参数名
-->
<!--(2)动态路由传参
(1)配置动态路由(index.js文件中)
const router=new VueRouter({
  routers:[
  ...,
  {
    path:"/search/:words",
    component: Search
  }
  ]
})

(2)配置导航链接
  to="/path/参数值"

(3)对应页面组件接收传递过来的值
  $route.params.参数名
-->


<!--查询参数传参 和 动态路由传参之间的异同点
区别:
1.查询参数传参(比较适合传多个参数)
(1)跳转:to="/path?参数名=值&参数名2=值"
(2)获取:$route.query.参数名

2.动态路由传参(优雅简洁,传单个参数比较方便)
(1)配置动态路由:path:"/paht/参数名"
(2)跳转:to="/path/参数名"
(3)获取:$route.params.参数名

-->


<!--动态路由参数可选符
问题:配了路由path:"/search/:words" 为什么按下面步骤操作,会未匹配到组件,显示空白?
原因:/search/:words 表示,必须要传参数,如果不传参数,也希望匹配,可以加个可选符“?”
const router=new VueRouter({
  routes=[
    {path:"/",redirect:'/home'}
    {path:"/home",component:Home]},
    {path:"/search/:words?",component:Search}

})

-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

25.3.2 router—index.js

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

import Home from "@/views/Home"
import Search from "@/views/Search"

Vue.use(VueRouter)   //将VueRouter 放到use()内,实则会实现VueRouter发生初始化变化
const router = new VueRouter({
        routes: [
            {path:"/home",component:Home},
            {path:"/search/:words",component:Search}
        ],
    }
)

//导出router
export default router

25.3.3 main.js

import Vue from 'vue'
import App from './App.vue'

import router from './router/index'

Vue.config.productionTip = false
//5.将插件对象注入到new Vue实例中
new Vue({
    render: h => h(App),
    router   //当路由对象名和router相同时,可简写成router
    // router: r   //当路由对象名和router不同时,需要对应路由对象名
}).$mount('#app')

25.3.4 App.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/find">首页</router-link>
      <router-link to="/my">搜索页</router-link>
    </div>
    <!--      路由出口: 该标签是用来控制组件所展示的位置-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style>
.link{
  height:50px;
  line-height:50px;
  background-color: #495150;
  display:flex;
  margin:-8px -8px 0 -8px;
  margin-bottom: 50px;
}

.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}

.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

/*router-link-active:模糊匹配(常使用)
to="/find"  => 地址栏匹配  /find  /find/one  /find/two
*/
/*.footer_wrap a.router-link-active{
  background-color: purple;
}*/
/*对router-link默认自带的router-link-active类进行重命名*/
.footer_wrap a.active {
  background-color: purple;
}

/*
router-link-exact-active:精确匹配(不常使用)
to="/find"  => 地址栏匹配 /find
*/


/*.footer_wrap a.router-link-exact-active{
  background-color: purple;
}*/
/*对router-link默认自带的类router-link-exact-active进行重命名*/
/*.footer_wrap a.exact-active{
  background-color: purple;
}*/

.footer_wrap a:hover {
  background-color: #555;
}
</style>

25.3.5 Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>

    <div class="hot-link">
      热门搜索:
<!--      查询参数传参-->
<!--      <router-link to="/search?key=发现歌单">发现歌单</router-link>-->
<!--      <router-link to="/search?key=我的歌单">我的歌单</router-link>-->
<!--      <router-link to="/search?key=朋友歌单">朋友歌单</router-link>-->
<!--      动态路由传参-->
      <router-link to="/search/发现歌单">发现歌单</router-link>
      <router-link to="/search/我的歌单">我的歌单</router-link>
      <router-link to="/search/朋友歌单">朋友歌单</router-link>

    </div>
  </div>
</template>

<script>
export default {
  name: "HomeComponent"
}
</script>

<style scoped>
.logo-box{

}
</style>

25.3.6 Search.vue

<template>
  <div class="search">
    <!--  查询参数传参-->
    <!--  <p>搜索关键字:{{$route.query.key}}</p>-->
    <!--  动态路由传参-->
    <p>搜索关键字:{{ $route.params.words }}</p>
    <p>搜索结果:</p>
    <ul>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SearchComponent",
  created() {
    //  在created中,获取路由参数,this.$route.query.参数名 获取查询参数
    //  查询参数传参
    //   console.log(this.$route.query.key);

    //  在created中,获取路由参数,this.$route.params.参数名 获取动态路由参数
    //  动态路由传参
    console.log(this.$route.params.words)
  }
}
</script>

<style scoped>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
}
</style>

25.4 Vue路由-重定向

25.4.1 Vue路由-重定向

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--Vue路由-重定向
问题:网页打开,url默认是/路径,未匹配到组件时,会出现空白
说明:重定向->匹配path后,强制跳转path路径
语法:{path:匹配路径,redirect:重定向到的路径}
const router=new VueRouter({
  routes:[
  {path:"/",redirect:'/home'},
  {path:"/home",component:Home},
  {path:"/search/:words",component:Search}
  ]
})
-->
<!--vue路由-404
作用:当路径找不到匹配时,给个提示页面
位置:配置在整个路由最后
语法:path:"*"(任意路径)-前面不匹配就命中最后这个
const router=new VueRouter({
  routes:[
  {path:"/",redirect:'/home'},
  {path:"/home",component:Home},
  {path:"/search/:words",component:Search},
  {path:"*",component:NotFind}
  ]
})
-->

<!--vue路径-模式设置
问题:路由的路径看起来不自然,有#,能否切成真正路径形式?
(1)hash路由(默认),例如:http://localhost:8080/#/home
(2)history路由(常用),例如:http://localhost:8080/home(以后上线需要服务器端支持)
const router=new VueRouter({
  routes,
  mode:"history"
})
-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

25.4.2 router—index.js

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

import Home from "@/views/Home"
import Search from "@/views/Search"
import NotFound from "@/views/NotFound"

Vue.use(VueRouter)   //将VueRouter 放到use()内,实则会实现VueRouter发生初始化变化
const router = new VueRouter({
        //注意:一旦采用了history模式,地址栏中就没有#,需要后台配置访问规则
        // mode: "hash",  //vue路径,设置模式(默认)
        mode: "history",  //vue路径,设置模式(常用)
        routes: [
            {path: "/", redirect: '/home'},
            {path: "/home", component: Home},
            {path: "/search/:words", component: Search},
            {path: "*", component: NotFound}  //vue路由-404
        ],
    }
)

//导出router
export default router

25.4.3 App.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/find">首页</router-link>
      <router-link to="/my">搜索页</router-link>
    </div>
    <!--      路由出口: 该标签是用来控制组件所展示的位置-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style>
.link{
  height:50px;
  line-height:50px;
  background-color: #495150;
  display:flex;
  margin:-8px -8px 0 -8px;
  margin-bottom: 50px;
}

.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}

.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

/*router-link-active:模糊匹配(常使用)
to="/find"  => 地址栏匹配  /find  /find/one  /find/two
*/
/*.footer_wrap a.router-link-active{
  background-color: purple;
}*/
/*对router-link默认自带的router-link-active类进行重命名*/
.footer_wrap a.active {
  background-color: purple;
}

/*
router-link-exact-active:精确匹配(不常使用)
to="/find"  => 地址栏匹配 /find
*/


/*.footer_wrap a.router-link-exact-active{
  background-color: purple;
}*/
/*对router-link默认自带的类router-link-exact-active进行重命名*/
/*.footer_wrap a.exact-active{
  background-color: purple;
}*/

.footer_wrap a:hover {
  background-color: #555;
}
</style>

25.4.4 NotFound.vue

<template>
<div>
  404
</div>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

其他文件见25.3

25.5 编程式导航

25.5.1 基本跳转

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--
问题一:点击按钮跳转如何实现?
编程式导航:用JS代码来进行跳转
两种语法:(1)path路径跳转(简易方便)
        (2)name命名路由跳转
-->
<!--(1)path路径跳转
this.$router.push('路由路径')(简写方式)
this.$router.push({  (完整写法)
  path:'路由路径'
})
-->
<!--(2)name命名路由跳转(适合path路径长的场景)
this.$router.push({
  name:'路由名'
})
{name:'路由名',path:'/path/xxx',component:xxx}
-->

<!--
问题二:点击搜索按钮,跳转需要传参如何实现?

-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

25.5.2 路由传参

<template>
  <div id="app">
    <!--    v-model相当于:value="XXX" @input="msg=XXX"-->
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">
  </div>
</template>
<!--
问题二:点击搜索按钮,跳转需要传参如何实现?
两种传参方式:查询参数+动态路由传参
两种跳转方式,对于两种传参方式都支持:
(1)path路径跳转传参
a)query传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
  path:'/路径',
  query:{
    参数名1:'参数值1',
    参数名2:'参数值2'
  }
})
b)动态路由传参,需要配置路由
this.$router.push('/路径/参数值')
this.$router.push({
  path:'/路径/参数值'
})
(2)name命名路由跳转传参
a)查询参数
this.$router.push({
  name:'路由名字',
  query:{参数名:参数值},
  params:{
    参数名:‘参数值’
  }
})
b)动态路由传参

-->
<script>
export default {}
</script>

<!--样式:-->
<style scoped>

</style>

25.5.3 index.js

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

import Home from "@/views/Home"
import Search from "@/views/Search"
import NotFound from "@/views/NotFound"

Vue.use(VueRouter)   //将VueRouter 放到use()内,实则会实现VueRouter发生初始化变化
const router = new VueRouter({
        //注意:一旦采用了history模式,地址栏中就没有#,需要后台配置访问规则
        // mode: "hash",  //vue路径,设置模式(默认)
        mode: "history",  //vue路径,设置模式(常用)
        routes: [
            {path: "/", redirect: '/home'},
            {path: "/home", component: Home},
            {name:"search", path: "/search/:words?", component: Search},
            {path: "*", component: NotFound}  //vue路由-404
        ],
    }
)

//导出router
export default router

25.5.4 main.js

import Vue from 'vue'
import App from './App.vue'

import router from './router/index'

Vue.config.productionTip = false
//5.将插件对象注入到new Vue实例中
new Vue({
    render: h => h(App),
    router   //当路由对象名和router相同时,可简写成router
    // router: r   //当路由对象名和router不同时,需要对应路由对象名
}).$mount('#app')

25.5.5 Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>

    <div class="hot-link">
      热门搜索:
      <!--      查询参数传参-->
      <!--      <router-link to="/search?key=发现歌单">发现歌单</router-link>-->
      <!--      <router-link to="/search?key=我的歌单">我的歌单</router-link>-->
      <!--      <router-link to="/search?key=朋友歌单">朋友歌单</router-link>-->
      <!--      动态路由传参-->
      <router-link to="/search/发现歌单">发现歌单</router-link>
      <router-link to="/search/我的歌单">我的歌单</router-link>
      <router-link to="/search/朋友歌单">朋友歌单</router-link>

    </div>
  </div>
</template>

<script>
export default {
  name: "HomeComponent",
  data() {
    return {
      inpValue: ""
    }
  },
  methods: {
    goSearch() {
      //1.通过路径的方式跳转
      //(1) this.$router.push("路由路径")(常用)
      //this.$router.push('路由路径?参数名=参数值')
      // this.$router.push("/search")
      // this.$router.push(`/search?key=${this.inValue}`)

      //(2)this.$router.push({ (完整写法,更适合传参)
      //     path:'路由路径'
      //     query:{
      //      参数名:参数值,
      //      参数名:参数值
      //     }
      // })
      /*this.$router.push({
        path:"/search",
        query:{
          key:this.inpValue
        }
      })*/

      //  2.通过命名路由的方式跳转(在index.js文件中需要给路由起名字)(适合长路径-层级比较深)
      /* this.$router.push({
         name:'路由名'
       })*/
      this.$router.push({
        name: 'search',
        /*query: {
          key: this.inpValue
        },*/
        params: {
          words: this.inpValue
        }

      })
    }

  }

}
</script>

<style scoped>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}
</style>

25.5.6 Search.vue

<template>
  <div class="search">
    <!--  查询参数传参-->
    <!--  <p>搜索关键字:{{$route.query.key}}</p>-->
    <!--  动态路由传参-->
    <p>搜索关键字:{{ $route.params.words }}</p>
<!--    <p>搜索关键字:{{ $route.query.key}}</p>-->
    <p>搜索结果:</p>
    <ul>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SearchComponent",
  created() {
    //  在created中,获取路由参数,this.$route.query.参数名 获取查询参数
    //  查询参数传参
    //   console.log(this.$route.query.key);

    //  在created中,获取路由参数,this.$route.params.参数名 获取动态路由参数
    //  动态路由传参
    console.log(this.$route.params.words)
  }
}
</script>

<style scoped>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
}
</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7271.html
标签
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!