vue part 11

vuex的模块化与namespace

115_尚硅谷Vue技术_vuex模块化+namespace_1_哔哩哔哩_bilibili

116_尚硅谷Vue技术_vuex模块化+namespace_2_哔哩哔哩_bilibili

vue-router路由

很常见的很重要的应用:Ajax请求,将响应的数据替换掉原先的代码从而实现不跳转页面的情况下实现局部刷新

1.什么是路由?

1.一个路由就是一组映射关系(key—value)
2. key 为路径,value 可能是function 或 component

2.路由分类
1.后端路由:
1)理解:value 是function,用于处理客户端提交的请求。
2)工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处
理请求,返回响应数据。                                                                                                                  2.前端路由:
1)理解:value 是component,用于展示页面内容。
2)工作过程:当浏览器的路径改变时,对应的组件就会显示。

基本路由

npm i vue-rounter@3

 和原来那样相同,都是vue3更新版本会报错

 index.js

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from "@/components/About";
import Home from '@/components/Home';

//创建并默认暴露一个路由器
export default new VueRouter({
   routes:[
       {
           path:'/about',
           component: About
       },
       {
           path:'/home',
           component: Home
       }
   ]
});

App.vue

router-link的特殊标签,实现路由 切换

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--原始使用a标签跳转多个页面,多页面应用-->
<!--          <a class="list-group-item active" href="./about.html">About</a>-->
<!--          <a class="list-group-item" href="./home.html">Home</a>-->
          <!--vue中借助router=link标签实现路由的切换-->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--router-view确定视图的位置-->
            <router-view>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
}
</script>
<style lang="css" scoped>

</style>

main.js

//引入Vue
import Vue from "vue";
//引入App
import App from './App';
//引入vue-router
import VueRouter from "vue-router";
import router from './router';

//关闭Vue的生产提示
Vue.config.productionTip = false;

//应用vue-router插件
Vue.use(VueRouter);

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

About.vue

<template>
  <h2>我是About的内容</h2>
</template>

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

<style scoped>

</style>

Home.vue两个很相似

<template>
  <h2>我是Home的内容</h2>
</template>

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

<style scoped>
</style>

嵌套(多级)路由

shift + Tab 是往前缩进 Tab是往后缩进

路由路径的变化

 路由传参

后端的问号传参,经典的,b站就使用了这个

传参的两种方式

命名路由

 params参数

两种写法

props写法

children:[
{
    name:'xiangqing',
    path:'detail',
    component:Detail,

    //props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。
    // props:{a:1,b:'hello'}
   
    //props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组
    // props:true

    //props的第三种写法,值为函数I
    props($route){
        return{
            id:$route.query.id,
            title:$route.query.title
        }
    }    

router-link 

P125主要是什么?

编程式路由导航

缓存路由组件

如何在组件输入后,切换了不把组件销毁?

如果keep-alive 什么都不写,就代表此处展示的所有组件都保持活跃,因此include="News"来限定范围

 多个缓存

 <keep-alive :include="['News','Messages']">
    <router-view></router-view>
 </keep-alive>

两个新的生命周期钩子

提示: 这2个钩子函数需要配合 keep-alive 标签使用

128_尚硅谷Vue技术_两个新的生命周期钩子_哔哩哔哩_bilibili

路由守卫

保护路由安全,判断是不是的条件(权限)才能。

全局前置

前端把本地存储的jwt给安全框架认证,过了的话给一个返回值,根据返回值来跳转路由吧,编程式路由

 全局后置

因为你还是在让服务器控制页面的跳转。完全违背了前后端分离的初衷。这个已经超出了后端的工作范围,后端只保证数据安全:即让特定的人拿到特定的数据。而页面安全:即让特定的人访问特定的页面。是前端的工作。

 P130

独享路由守卫

P131

组件内路由守卫

P132

hash和history

hsah是不会发给服务器的,还有history模式

hash是由#,但是history只要/即可,但是他在ie中难以使用

npm run build

进行打包出来dist,(webpack)然后node express部署

npm init
然随便起个名字
atguigu_test_server

npm i express

写代码server.js
cli
node server

server.js

const express = require('express')

const app = express()
app.use(express.static(__dirname+'/static'))

app.get('/person',(req,res)=>{
    res.send({
        name:'tom',
        age:18
    })
})

app.listen(5005,(err)=>{
    if(!err) console.log('服务器启动成功!')
})

发现history模式更麻烦,不如hash,因为刷新就cannot GET

如何解决?什么java库阿,后端的某些配合,nginx阿

但是此库可以解决部分问题

 VUE UI组件库

最后两集懒得卡吗啊啊啊

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

对称加密算法使用示例

Demo包括以下对称加密算法组合 备注&#xff1a;XTS仅支持AES128和AES256&#xff0c;不支持AES192 from cryptography.hazmat.primitives.ciphers import Cipher, algorithms, modes from cryptography.hazmat.primitives import cmac from cryptography.hazmat.primitives.…

使用Big Data Tools连接JetBrains IDE与OSS

您可以在JetBrains IDE中通过Big Data Tools插件直接管理OSS的Bucket和文件。 什么是Big Data Tools Big Data Tools是一款JetBrains IDE插件&#xff0c;可以提供以下扩展功能&#xff1a; 便于使用远程文件系统&#xff08;包括OSS&#xff09;的用户界面。 与文件管理器类…

【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器(上)

文章目录 前言一、ArkTS基本介绍1、 ArkTS组成2、组件参数和属性2.1、区分参数和属性的含义2.2、父子组件嵌套 二、装饰器语法1.State2.Prop3.Link4.Watch5.Provide和Consume6.Observed和ObjectLink代码示例&#xff1a;示例1&#xff1a;&#xff08;不使用Observed和ObjectLi…

Flutter启动无法运行热重载

当出现这种报错时&#xff0c;大概率是flutter的NO_Proxy出问题。 请忽略上面的Android报错因为我做的是windows开发这个也就不管了哈&#xff0c;解决下面也有解决报错的命令大家执行一下就行。 着重说一下Proxy的问题&#xff0c; 我们看到提示NO_PROXY 没有设置。 这个时候我…

【计算机网络 - 基础问题】每日 3 题(十三)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…

android10 系统定制:增加应用使用数据埋点,应用使用时长统计

需求意在统计应用的使用时长和开始结束时间&#xff0c;最终生成一个文件可以直观看出什么时候进入了哪个应用、什么时候退出&#xff0c;如图&#xff1a; 每行记录了应用的进入或退出&#xff0c;以逗号分割。分别记录了事件开始时间&#xff0c;应用包名&#xff0c;进入或…

STM32常用数据采集滤波算法

例如&#xff0c;STM32进行滤波处理时&#xff0c;主要目的是处理数据采集过程中可能产生的噪声和尖刺信号。这些噪声可能来自电源干扰、传感器自身的不稳定性或其他外部因素。 1.一阶互补滤波 方法&#xff1a;取a0~1,本次滤波结果&#xff08;1-a&#xff09;本次采样值a上…

用 nextjs 创建 Node+React Demo

1、环境准备 1、安装Node 访问Node官网下载对应Node版本&#xff1a;Node官网&#xff0c;安装成功后通过命令查看当前node版本 node -v2、安装Node版本管理工具nvm 如果nvm install 安装node失败&#xff0c;一般是网络问题&#xff0c;可以用手机热点或者翻墙 # 安装nvm c…

Python语言基础教程(上)4.0

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

【LeetCode每日一题】——401.二进制手表

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 回溯 二【题目难度】 简单 三【题目编号】 401.二进制手表 四【题目描述】 二进制手表顶部…

4.提升客户服务体验:ChatGPT在客服中的应用(4/10)

本文大纲旨在指导撰写一篇全面探讨ChatGPT如何通过优化客户服务流程、提供实际应用案例和用户反馈&#xff0c;以提升客户服务体验的深入博客文章。 引言 在当今竞争激烈的商业环境中&#xff0c;客户服务已成为企业成功的关键因素。优质的客户服务不仅能够增强客户满意度和忠…

Docker 进入容器并运行命令的方法

目录 理解 Docker 容器的基本概念 使用 docker exec 进入运行中的容器 基本用法 常用选项解析 选项详解 实际案例演示 1. 进入容器的交互式 Shell 2. 在容器中运行单个命令 3. 以指定用户运行命令 4. 设置环境变量并运行命令 5. 指定工作目录 使用 docker attach 附…

数据结构-线性表顺序单项链表双向链表循环链表

1数据结构概述 数据结构是计算机组织、存储数据的方式。是思想层面的东西&#xff0c;和具体的计算机编程语言没有关系。可以用任何计算机编程语言去实现这些思想。 1.1 数据逻辑结构 反映数据逻辑之间的逻辑关系&#xff0c;这些逻辑关系和他们咱在计算机中的存储位置无关。…

原生+jquery写自动消失的提示框

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>自动消失消息提示</title> <style>/…

使用scp命令从本地往服务器传输文件失败

解决办法&#xff1a; 找到这个文件&#xff0c;打开&#xff0c;将里面的服务器ip对应的一行数据删掉即可。

6.C_数据结构_查询_哈希表

概述 哈希表的查询是通过计算的方式获取数据的地址&#xff0c;而不是依次比较。在哈希表中&#xff0c;有一个键值key&#xff0c;通过一些函数转换为哈希表的索引值。 其中&#xff1a;这个函数被称为哈希函数、散列函数、杂凑函数&#xff0c;记为&#xff1a;H(key) 哈希…

Java知识点小结3:内存回收

文章目录 对象引用强引用软引用&#xff08;SoftReference&#xff09;弱引用&#xff08;WeakReference&#xff09;考一考 虚引用&#xff08;PhantomReference&#xff09;总结 垃圾回收新生代老年代永生代 内存管理小技巧尽量使用直接量使用StringBuilder和StringBuffer进行…

7--SpringBoot-后端开发、原理详解(面试高频提问点)

目录 SpringBoot原理 起步依赖 自动配置 配置优先级 Bean设置 获取Bean 第三方Bean SpringBoot原理 内容偏向于底层的原理分析 基于Spring框架进行项目的开发有两个不足的地方&#xff1a; 在pom.xml中依赖配置比较繁琐&#xff0c;在项目开发时&#xff0c;需要自己去找…

最新编程语言排行榜:Python创新高!

2024年编程语言排行榜又迎来了令人惊喜的变化&#xff01;Python&#xff0c;这门因简单易学而受到广大程序员青睐的语言&#xff0c;再次突破历史记录&#xff0c;稳居排行榜前列。无论是数据分析、机器学习&#xff0c;还是Web开发&#xff0c;Python都展现出了强大的生命力和…

828华为云征文 | 使用Flexus云服务器X实例部署GLPI资产管理系统

828华为云征文 | 使用Flexus云服务器X实例部署GLPI资产管理系统 1. 部署环境说明2. 部署基础环境2.1. 操作系统基本配置2.2. 部署Nginx2.3. 部署MySQL2.4. 部署PHP 3. 部署GLPI资产管理系统 1. 部署环境说明 本次环境选择使用华为云Flexus云服务器X实例&#xff0c;因为其具有高…