Vue part-11

eve2333 发布于 2024-10-24 79 次阅读

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是往后缩进

路由路径的变化
​

 路由传参

命名路由

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"来限定范围

1.作用：让不展示的路由组件保持挂载，不被销毁。
2. 具体编码：

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

 多个缓存

 <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组件库

Vue UI 组件库

Vue适配组件库推荐

组件库之所以叫组件库，一定是为了适应组件化开发用的组件库。所以Vue有Vue适配的组件库，React有React适配的组件库。

由于是组件嘛，所以全都需要用到：Vue.use(XXX)

下面介绍的全都是Vue适配：

移动端：

  • Vant https://youzan.github.io/vant
  • Cube UI https://didi.github.io/cube-ui
  • Mint UI https://mint-ui.github.io
  • NutUI 京东移动端Vue组件库！

PC端：

  • Element UI https://element.eleme.cn
  • IView UI https://www.iviewui.com

特别推荐：钉耙（tinper-bee）

在我的React笔记中还要再次推荐一次！

http://bee.tinper.org/design-new/

tinper-bee 是一套基于 React.js 的开源组件库，它从丰富的企业级中后台应用场景中实战沉淀而来，为复杂应用的快速开发提供一致性 UI 解决方案。

组件的全部引入和按需引入

以 Element UI为例：如果你全部引入：

//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';
//应用ElementUI
Vue.use(ElementUI);

会发现臃肿无比： ​

所以我们需要按需引入：

样例babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
		["@babel/preset-env", { "modules": false }],
  ],
	plugins:[
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

main.js中按需引入：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

按照官网指引做就好了 ​

Vue3的展望！