Vue [Day6]

news2024/12/23 11:00:34

路由进阶

路由模块的封装抽离

在这里插入图片描述



src/router/index.js



import VueRouter from 'vue-router'
// 用绝对路径的方式来写目录     @ 相当于src
import Find from '@/views/Find'
import Friend from '../views/Friend'
import My from '../views/My'

import Vue from 'vue'
Vue.use(VueRouter)


const router = new VueRouter({

    routes: [
    
        { path: '/find', component: Find },
        { path: '/friend', component: Friend },
        { path: '/my', component: My},
    ]
})

// 导出
export default router


src/main.js

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

// 导入
import router from './router/index'

Vue.config.productionTip = false


new Vue({
    render: h => h(App),
    // router:router
    // 简写
    router
}).$mount('#app')


声明式导航 - 导航链接

在这里插入图片描述
在这里插入图片描述App.vue

<template>
    <div class="app">
        <div class="nav">
            <router-link to="/find">发现</router-link>
            <router-link to="/friend">朋友</router-link>
            <router-link to="/my">我的</router-link>
        </div>

        <!-- 路由出口 匹配组件所展示的位置 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {}
</script>

<style>
.nav a {
    display: inline-block;
    width: 50px;
    height: 30px;
    text-decoration: none;
    background-color: #fbfafa;
    border: 1px solid black;
}

.nav a.router-link-active {
    background-color: #e68b8b;
}
</style>

router-link(-exact)-active

在这里插入图片描述

自定义高亮类名

router/index.js

const router = new VueRouter({
    routes: [
        { path: '/find', component: Find },
        { path: '/friend', component: Friend },
        { path: '/my', component: My},
    ],

    //配置 
    linkActiveClass: 'active',
    linkExactActiveClass:'exact-active'
})


App.vue中对应的css名字修改 
.nav a.active {
    background-color: #e68b8b;
}


声明式导航 - 跳转传参

法1：查询参数传参（适用于多个值

在这里插入图片描述




router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search', component: Search }
  ]
})

export default router


App.vue 
<template>
    <div id="app">
        <div class="link">
            <router-link to="/home">首页</router-link>
            <router-link to="/search">搜索页</router-link>
        </div>

        <router-view></router-view>
    </div>
</template>
  
  <script>
export default {}
</script>
  
  <style scoped>
.link {
    height: 50px;
    line-height: 50px;
    background-color: #495150;
    display: flex;
    margin: -8px -8px 0 -8px;
    margin-bottom: 50px;
}
.link a {
    display: block;
    text-decoration: none;
    background-color: #ad2a26;
    width: 100px;
    text-align: center;
    margin-right: 5px;
    color: #fff;
    border-radius: 5px;
}
</style>


views/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
            >
        </div>
    </div>
</template>
  
  <script>
export default {
    name: 'FindMusic'
}
</script>
  
  <style>
.logo-box {
    height: 150px;
    background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
    display: flex;
    justify-content: center;
}
.search-box input {
    width: 400px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #c4c7ce;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.search-box input:focus {
    border: 2px solid #ad2a26;
}
.search-box button {
    width: 100px;
    height: 36px;
    border: none;
    background-color: #ad2a26;
    color: #fff;
    position: relative;
    left: -2px;
    border-radius: 0 4px 4px 0;
}
.hot-link {
    width: 508px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}
.hot-link a {
    margin: 0 5px;
}
</style>


views/Search.vue

<template>
    <div class="search">
        <p>搜索关键字: {{ $route.query.key }}</p>
        <p>搜索结果:</p>
        <ul>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
        </ul>
    </div>
</template>
  
  <script>
export default {
    name: 'MyFriend',
    created() {
        // 在created中，获取路由参数
        // this.$route.query.参数名 获取
        console.log(this.$route.query.key)
    }
}
</script>
  
  <style>
.search {
    width: 400px;
    height: 240px;
    padding: 0 20px;
    margin: 0 auto;
    border: 2px solid #c4c7ce;
    border-radius: 5px;
}
</style>


法2：动态路由传参（适用于单个参数

在这里插入图片描述index.js

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search/:totowords', component: Search }
  ]
})


Home.vue 
<div class="hot-link">
            热门搜索：
            <router-link to="/search/黑马程序员">黑马程序员</router-link>
            <router-link to="/search/前端培训">前端培训</router-link>
            <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
        </div>


Search.vue 
<div class="search">
        <!-- 变了 -->
        <p>搜索关键字: {{ $route.params.totowords }}</p>
        <p>搜索结果:</p>
        <ul>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
        </ul>
    </div>
</template>


动态路由参数可选符

在这里插入图片描述

两种传参方式的区别

在这里插入图片描述


自己尝试了一下 button （动态路由传参

因为发现案例的搜索按钮，没用行为，就咋gpt的辅助下，踉踉跄跄的实现了
index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) 

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
        // { path: '/search/:totowords', component: Search },
        
        // 和上面的没啥大区别，就是起了个名字
        {
            path: '/search/:text',
            name: 'search',//!!!!
            component:  Search
         }
  ]
})

export default router


Home.app

<template>
    <div class="home">
        <div class="logo-box"></div>
        <div class="search-box">
            <!-- !!!!! -->
            <input v-model="text" type="text" />
            <button @click="cli">搜索一下</button>
        </div>
        <div class="hot-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: 'FindMusic',
    data() {
        return {
            text: ''
        }
    },
    methods: {
        cli() {
            // 法一：
            // let text = this.text
            // this.$router.push({ name: 'search', params: { text } })

            //  法二(错误的)：  就一直想这样写，就是报错，后来gpt给了法3 才ok
            // 原来是不同名的不可以简写，要 xxxx:自己起的名字
            //   this.$router.push({ name: 'search', params: {  this.text } })

            // 法三：
            this.$router.push({ name: 'search', params: { text: this.text } })
        }
    }
}
</script>
  
  <style>
.logo-box {
    height: 150px;
    background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
    display: flex;
    justify-content: center;
}
.search-box input {
    width: 400px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #c4c7ce;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.search-box input:focus {
    border: 2px solid #ad2a26;
}
.search-box button {
    width: 100px;
    height: 36px;
    border: none;
    background-color: #ad2a26;
    color: #fff;
    position: relative;
    left: -2px;
    border-radius: 0 4px 4px 0;
}
.hot-link {
    width: 508px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}
.hot-link a {
    margin: 0 5px;
}
</style>


Search.vue

<template>
    <div class="search">
        <!-- 变了 -->
        <p>搜索关键字: {{ $route.params.text }}</p>
        <p>搜索结果:</p>
        <ul>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
        </ul>
    </div>
</template>
  
  <script>
export default {
    name: 'MyFriend'
}
</script>
  
  <style>
.search {
    width: 400px;
    height: 240px;
    padding: 0 20px;
    margin: 0 auto;
    border: 2px solid #c4c7ce;
    border-radius: 5px;
}
</style>


App.vue
同上



重定向

在这里插入图片描述


404

在这里插入图片描述



在这里插入图片描述



模式设置

需要后台配置访问规则
在这里插入图片描述



在这里插入图片描述


编程式导航 - 基本跳转

path路径跳转

在这里插入图片描述Home.vue

<template>
    <div class="home">
        <div class="logo-box"></div>
        <div class="search-box">
            <!-- !!!!! -->
            <input v-model="text" type="text" />
            <button @click="cli">搜索一下</button>
        </div>
        <div class="hot-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: 'FindMusic',
    data() {
        return {
            text: ''
        }
    },
    methods: {
        cli() {
            // 通过路径的方式跳转
            // （1）this.$router.push('路径名') 简写
            // this.$router.push('/search')

            // （2）this.$router.push({  完整写法
            //   path:'路径名称'
            // })
            this.$router.push({
                //完整写法
                path: './search'
            })
        }
    }
}
</script>
  
  <style>
.logo-box {
    height: 150px;
    background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
    display: flex;
    justify-content: center;
}
.search-box input {
    width: 400px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #c4c7ce;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.search-box input:focus {
    border: 2px solid #ad2a26;
}
.search-box button {
    width: 100px;
    height: 36px;
    border: none;
    background-color: #ad2a26;
    color: #fff;
    position: relative;
    left: -2px;
    border-radius: 0 4px 4px 0;
}
.hot-link {
    width: 508px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}
.hot-link a {
    margin: 0 5px;
}
</style>


name 命名路由跳转（适合path路径长的场景）

在这里插入图片描述Home.vue
微调

 methods: {
        cli() {
            // 通过命名路由的方式跳转（需要给路由命名
            this.$router.push({
                // name:'路由名'
                name: 'search'
            })
        }
    }


index.js

    routes: [
        { path: '/', redirect:'/Home' },
        { path: '/home', component: Home },
        // { path: '/search/:totowords', component: Search },
        // 和上面的没啥大区别，就是起了个名字
        {
            path: '/search/:text',
            name: 'search',//!!!!
            component:  Search
        },
        { path: '*', component: NotFind },  
  ]

编程式导航 - 路由传参

在这里插入图片描述



path路径跳转 + 动态路由传参



简便写法

在这里插入图片描述



完整写法
在这里插入图片描述

以上的index.js 里的name:'/search’不用写，忘记删了




动态路由是’/’
查询参数是’?’



path路径跳转 + 查询参数传参

在这里插入图片描述


简写

在这里插入图片描述


完整写法
请添加图片描述



name命名路由 + 动态路由传参

在这里插入图片描述



在这里插入图片描述



name命名路由 + 查询参数传参

在这里插入图片描述

在这里插入图片描述

小结

在这里插入图片描述


在这里插入图片描述



【综合案例】—— 面经基础版

在这里插入图片描述




在这里插入图片描述





在这里插入图片描述


在这里插入图片描述




在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/857641.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Idea 反编译jar包

Idea 反编译jar包

实际项目中&#xff0c;有时候会需要更改jar包源码来达到业务需求&#xff0c;本文章将介绍一下如何通过Idea来进行jar反编译 1、Idea安装decompiler插件 2、找到decompiler插件文件夹 decompiler插件文件夹路径为&#xff1a;idea安装路径/plugins/java-decompiler/lib 3、…
阅读更多...
移动端的Flex布局

移动端的Flex布局

目录 引入 一、传统布局与flex布局 传统性 flex布局 二、felx的特点 三、flex布局父项的常见属性 四、flex布局子项的常见方向 总结 引入 flex 是 flexible Box的缩写&#xff0c;意为“弹性布局”&#xff0c;用来为盒状模型提供最大的灵活性&#xff0c;任何一个容器…
阅读更多...
成像质量高精度标定高均匀光源积分球

成像质量高精度标定高均匀光源积分球

随着航天遥感技术的发展&#xff0c;对遥感仪器的定标精度要求越来越高&#xff0c;这就需要高精度的工程应用定标光源。光学定标&#xff0c;在工程应用上是采用光学标准传递的方法对应用设备进行定标&#xff0c;而不是直接用原始标准对应用设备进行定标。其传递链路之一&…
阅读更多...
树莓派安装ubuntu

树莓派安装ubuntu

ubuntu包下载 从ubuntu 官网下载镜像&#xff1a;https://cn.ubuntu.com/blog/build-raspberry-pi-desktop-ubuntu 按个人需求下载&#xff0c;可以首先使用 桌面版22.04 LTS版本&#xff1b; 烧录 从树莓派管官网下载image烧录工具&#xff1a;https://www.raspberrypi.c…
阅读更多...
Improved Deep Metric Learning with Multi-class N-pair Loss Objective

Improved Deep Metric Learning with Multi-class N-pair Loss Objective

Improved Deep Metric Learning with Multi-class N-pair Loss Objective 来源&#xff1a; NIPS’2016NEC Laboratories America 文章目录 Improved Deep Metric Learning with Multi-class N-pair Loss ObjectiveDistance Metric LearningDeep Metric Learning with Multip…
阅读更多...
实战：使用Docker部署Hadoop集群

实战：使用Docker部署Hadoop集群

文章目录 Hadoop简介Hadoop优势Hadoop应用场景docker与docker-compose安装Hadoop集群搭建环境变量docker-compose环境文件树结构编排并运行容器运行wordcount例子 写在最后 Hadoop简介 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节…
阅读更多...
ChatGLM2-6B在windows下的部署

ChatGLM2-6B在windows下的部署

2023-08-10 ChatGLM2-6B在windows下的部署 一、部署环境 1、Windows 10 专业版&#xff0c; 64位&#xff0c;版本号&#xff1a;22H2&#xff0c;内存&#xff1a;32GB 2、已安装CUDA11.3 3、已安装Anaconda3 64bit版本 4、有显卡NVIDIA GeForce RTX 3060 Laptop GPU …
阅读更多...
AI Deep Reinforcement Learning Autonomous Driving（深度强化学习自动驾驶）

AI Deep Reinforcement Learning Autonomous Driving（深度强化学习自动驾驶）

AI Deep Reinforcement Learning Autonomous Driving&#xff08;深度强化学习自动驾驶&#xff09; 背景介绍研究背景研究目的及意义项目设计内容算法介绍马尔可夫链及马尔可夫决策过程强化学习神经网络 仿真平台OpenAI gymTorcs配置GTA5 参数选择行动空间奖励函数 环境及软件…
阅读更多...
8.10CPI决战日来临，黄金会意外走高吗？

8.10CPI决战日来临，黄金会意外走高吗？

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周四(8月10日)亚市早盘&#xff0c;美元指数在102.50维持多头走势&#xff0c;黄金避险情绪消散&#xff0c;金价跌至1916美元&#xff0c;下破1900美元前景深化。周三黄…
阅读更多...
如何使用Audition生成固定频率的正弦波

如何使用Audition生成固定频率的正弦波

一&#xff0c;简介 本文主要介绍如何使用Audition软件生成固定频率的正弦波进行相关测试验证工作。 二&#xff0c;准备工作 需要安装Audition软件&#xff0c;本次使用的是Adobe Audition CC 2018绿色版。其他版本也都可以&#xff0c;只是步骤上可能有细微的差别。 三&…
阅读更多...
山西电力市场日前价格预测【2023-08-11】

山西电力市场日前价格预测【2023-08-11】

日前价格预测 预测明日&#xff08;2023-08-11&#xff09;山西电力市场全天平均日前电价为367.15元/MWh。其中&#xff0c;最高日前电价为408.91元/MWh&#xff0c;预计出现在20: 00。最低日前电价为343.90元/MWh&#xff0c;预计出现在02: 30。 价差方向预测 1&#xff1a; 实…
阅读更多...
2.UE数字人语音交互（UE数字人系统教程）

2.UE数字人语音交互（UE数字人系统教程）

上一篇&#xff1a;1.Fay-UE5数字人工程导入 2.UE数字人语音交互&#xff08;UE数字人系统教程&#xff09; 1、启动ue数字人 2、下载Fay数字人控制器 Fay数字人控制器下载地址 3、依照说明配置运行Fay 4、启动Fay控制器 5、切换到UE界面开始说话 6、完成了&#xf…
阅读更多...
（学习笔记-进程管理）进程调度

（学习笔记-进程管理）进程调度

进程都希望自己能够占用CPU进行工作&#xff0c;那么这涉及到前面说过的进程上下文切换。 一旦操作系统把进程切换到运行状态&#xff0c;也就意味着该进程占用着CPU在执行&#xff0c;但是操作系统把进程切换到其他状态的时候&#xff0c;就不能在CPU中执行了&#xff0c;于是…
阅读更多...
力扣真题：200. 岛屿数量（两种实现方法）

力扣真题：200. 岛屿数量（两种实现方法）

java代码实现&#xff1a; 第一种&#xff1a; 用了类似感染的方法&#xff0c;就是一个节点出发&#xff0c;如果此时这个节点没被感染&#xff0c;且是陆地&#xff0c;就可以进入遍历&#xff0c;将其邻接的陆地全部遍历一遍&#xff0c;标志数组sign相应位置至为1.然后一…
阅读更多...
pdf怎么压缩到1m？这样做压缩率高！

pdf怎么压缩到1m？这样做压缩率高！

PDF是目前使用率比较高的一种文档格式&#xff0c;因为它具有很高的安全性&#xff0c;还易于传输等&#xff0c;但有时候当文件体积过大时&#xff0c;会给我们带来不便&#xff0c;这时候简单的解决方法就是将其压缩变小。 想要将PDF文件压缩到1M&#xff0c;也要根据具体的情…
阅读更多...
【LeetCode】丑数题目合辑

【LeetCode】丑数题目合辑

文章目录 263. 丑数思路代码 264. 丑数 II方法一&#xff1a;最小堆思路代码 方法二&#xff1a;动态规划&#xff08;三指针法&#xff09;思路代码 1201. 丑数 III方法&#xff1a;二分查找 容斥原理思路代码 313. 超级丑数方法&#xff1a;“多路归并”思路代码 总结参考资…
阅读更多...
如何压缩照片？一看就会的压缩方法

如何压缩照片？一看就会的压缩方法

压缩照片是再正常不过的需求了&#xff0c;比如上传个证件照&#xff0c;要求在20k以内&#xff0c;那么超过这个大小的照片我们就必须进行压缩处理&#xff0c;其实现在压缩照片的方法也特别多&#xff0c;不论是压缩软件、图片编辑软件&#xff0c;甚至在线网站都能搞定。 下…
阅读更多...
SpringBoot 将项目打包成 jar 包

SpringBoot 将项目打包成 jar 包

SpringBoot 将项目打包成 jar 包 一、项目打包成 jar 包 首先在 pom.xml 文件中导入 Springboot 的 maven 依赖 <!-- 将应用打包成一个可以执行的 jar 包 --> <build><plugins><plugin><groupId>org.springframework.boot</groupId><…
阅读更多...
go-admin 使用开发

go-admin 使用开发

在项目中使用redis 作为数据缓存&#xff1a;首先引入该包 “github.com/go-redis/redis/v8” client : redis.NewClient(&redis.Options{Addr: config.QueueConfig.Redis.Addr, // Redis 服务器地址Password: config.QueueConfig.Redis.Password, // Redis 密码&…
阅读更多...
【LeetCode 75】第二十五题（735）行星碰撞

【LeetCode 75】第二十五题（735）行星碰撞

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码运行结果&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给一个数组&#xff0c;数组里的元素表示行星&#xff0c;元素的符号决定行星运动的方向&#xff0c;元素的绝对值决定行星的大小…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023