程序员经验分享-hwhale

Vue_test

2023-11-10

vue_test笔记

1. 脚手架文件结构

├─node_modules
├─public
│    favicon.ico :页签图标
│    index.html :主页面
├─src
│   ├─App.vue :汇总所有组件
│   ├─main.js :入口文件
│   ├─assets :存放静态资源
│   │    logo.png
│   └─components :存放组件
│         HelloWorld.vue
│         MySchool.vue
│         MyStudent.vue
├─.gitignore :git版本控制忽略的配置
├─babel.config.js :babel的配置文件
├─package.json :应用包配置文件
├─README.md :应用描述文件
├─package-lock.json :包版本控制文件

2. 关于不同版本的Vue

  • vue.js与vue.runtime.xxx.js的区别:
    (1).vue.js是完整版的Vue，包含:核心功能+模板解析器。
    (2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
  • 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

3. vue.config.js配置文件

  • 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  • 使用vue.config.js可以对脚手架进行个性化定制，详情见: https://cli.vuejs.org/zh

4. ref属性

1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式:
打标识:<h1 ref="xxx">.....</h1>
或 <School ref="xxx"></School>获取: this.$refs.xXx

5. 配置项props

  • 功能:让组件接收外部传过来的数据
    • (1).传递数据:
      <Demo name=" xxx"/>
    • (2).接收数据:

      • 第一种方式（只接收):props:["name"]

      • 第二种方式(限制类型):
        props:{ name :String}

      • 第三种方式(限制类型、限制必要性、指定默认值):

        props:{
    name:{
        type:String， //类型
        required:true, //必要性
        default:'Mike' //默认值
    }

备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告

6. mixin(混入)

  • 功能:可以把多个组件共用的配置提取成一个混入对象
  • 使用方式:
    第一步定义混合，例如:
{
    data(){...},
    methods::{....}
    ....
}
  • 第二步使用混入。例如:
    (1).全局混入:Vue.mixin(xxx)
    (2).局部混入: mixins: ["xxx']

7. 插件

  • 功能:用于增强Vue
  • 本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
  • 定义插件:
对象.install = function (vue,options){
//1.添加全局过滤器
vue.filter(....)

//2．添加全局指令
vue.directive(....)

//3．配置全局混入(合)
vue.mixin(....)

//4.添加实例方法
Vue.prototype.$myMethod = function(){...}
Vue.prototype.$myProperty = XXX
}

使用插件:Vue.use()

8. scoped样式

  • 作用：让样式布局生效，防止冲突
  • 写法: <style scoped></style>

9. 总结TodoList案例

  1. 组件化编码流程:
    1. 拆分静态组件:组件要按照功能点拆分，命名不要与html元紊冲突。
    2. 实现动态组件:考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:
      1. 一个组件在用:放在组件自身即可。
      2. 一些组件在用:放在他们共同的父组件上(状态提升〕。
    3. 实现交互:从绑定事件开始。
  2. props适用于:
    1. 父组件==>子组件通信
    2. 子组件==>父组件通信（要求父先给子一个函数)
  3. 使用v-model时要切记:
    v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
  4. props传过来的若是对象类型的值，修改对象中的属性时ue不会报错。但不推荐这样做。|

10. webStorage

  1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
  2. 浏览器端通过Window.sessionStorage和 Window.localStorage属性来实现本地存储机制。
  3. 相关API:
    1. xxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
    2. xxxxStorage.getItem('person');
      该方法接受一个键名作为参数，返回健名对应的值。
    3. xxxxStorage.removeItem('key');
      该方法接受一个键名作为参数，并把该健名从存储中删除。
    4. xxxStorage.clear()
      该方法会清空存储中的所有数据。
  4. 备注:
    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(nul1)的结果依然是null.

11. 组件的自定义事件

  1. 一种组件间通信的方式，适用于:子组件===>父组件

  2. 使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。

  3. 绑定自定义事件:

    1. 第一种方式，在父组件中: <Demo @atEvent="test"/>或 <Demo v-on:atEvent="test"/>
    2. 第二种方式，在父组件中:
    <Demo ref="demo"/>
......
mounted( ){
    this.$refs.xxx.$on('atEvent',this.test)
}
    1. 若想让自定义事件只能触发一次，可以使用 once修饰符，或 $once方法。

  4. 触发自定义事件:this. $emit('atEvent',数据)

  5. 解绑自定义事件 this.$off('atEvent')

  6. 组件上也可以绑定原生DOM事件，需要使用 native修饰符。

  7. 注意:通过 this.$refs.xxx.$on('atEvent',回调)绑定自定义事件时，回调 要么配置在 m e t h o d s 中，要么用箭头函数 \color{#FF0000}{要么配置在methods中，要么用箭头函数} 要么配置在methods中，要么用箭头函数 ，否则this指向会出问题!

12. 全局事件总线(GlobalEventBus)

  1. —种组件间通信的方式,适用于 任意组件间通信 \color{red}{任意组件间通信} 任意组件间通信。
  2. 安装全局事件总线:
new vue({
    ......
    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
    ),
    ......
})

  1. 使用事件总线:

    1. 接收数据:A组件想接收数据，则在A组件中给 b u s 绑定自定义事件，事件的 bus绑定自定义事件，事件的 bus绑定自定义事件，事件的\color{red}{回调留在A组件自身}$。
    methods(){
    demo(data){......}
)
...
mounted(){
    this.$bus.$on('xxxx',this.demo)
}
    1. 提供数据:this.$bus.$emit( "xxxx",数据)

  2. 最好在beforeDestroy钩子中，用 $off去 解绑当前组件所用到的事件 \color{red}{解绑当前组件所用到的事件} 解绑当前组件所用到的事件。

13. 消息订阅与发布(pubsub)

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 使用步骤:

    1. 安装pubsub: npm i pubsub-js
    2. 引入: import pubsub from 'pubsub-js"
    3. 接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
    methods(){
    demo(data){......}
}
mounted(){
    this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
    1. 提供数据:pubsub.publish('xxx',数据)
    2. 最好在beforeDestroy钩子中，用 PubSub. unsubscribe(pid)去取消订阅.

14. nextTick

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次DOM更新结束后执行其指定的回调。
  3. 什么时候用:当牧变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

15. Vue封装的过度与动画

  1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
  2. 图示
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SaBoOY5C-1658486077403)(/public/QQ%E6%88%AA%E5%9B%BE20220714163433.png)]
  3. 写法：

    1. 准备好样式

      • 元素进入的样式
        1. v-enter:进入的起点
        2. v-enter-active:进入过程中
        3. v-enter-to:进入的终点
      • 元素离开的样式
        1. v-leave:离开的起点
        2. v-leave-active:离开过程中
        3. v-leave-to:离开的终点

    2. 使用 <transition>包裹需要过渡的元素，并配置name属性

          <transition name="hello">
        <h1 v-show="isShow">Hello!</h1>
    </transition>

    3. 备注：若有多个元素需要过渡，则需要使用：<transition-group>,并且每个元素都要指定 key值

16. vue脚手架配置代理

方法一

在vue.config.js中添加如下配置;

devServer:{
    proxy : "http://localhost:5000"
}

说明:
1. 优点:配置简单，请求资源时直接发给前端(8080)即可。
2. 缺点:不能配五多个代理，不能灵活的控制请求是否走代理。
3. 工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

方法二

编写vue.config.js配置具体代理规则:

module.exports = {
    devServer: {
        proxy : {
            ' /api1': { //匹配所有以'/api'非开头的请求路径
            target: 'http: / / localhost: 5000' ,// 代理目标的基础路径
            changeOrigin: true,
            pathRewrite: {'^/api1' : ''}
            },
            ' /api2 ' : {//匹配所有以‘/api'开头的请求路径
            target:'http: / / localhost :5801', //代理目标的基础路径
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
            }
        }
    }
}
/*
    changeOrigin设置为true时，服务器收到的请求头中的host为: localhost: 5000
    changeOrigin设置为false时，服务器收到的请求头中的host为: localhost:8080
    changeOrigin默认值为true
*/

说明：
1. 优点:可以配置多个代理，且可以灵活的控制诘求是否走代理。
2. 缺点:配置略微繁琐，请求资源时必须加前缀。

17. 插槽

  1. 作用：让父组件可以向子组件指定位置插入htm结构，也是一种组件间通信的方式，适用于父组件 ==> 子组件。

  2. 分类:默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽

      父组件中：
	<Category>
		<div>html结构1</div>
	</Category>
子组件中:
	<template>
		<div>
		<!--定义插槽-->
		<slot>插槽默认内容...</slot></div>
	</template>

      1. 具名插槽

        父组件中;
<category>
	<template slot="center">
		<div>html结构1</div>
	</template>

	<template v-slot:footer>
		<div>html结构2</div>
	</template>
</Category>

子组件中:
<template>
	<div>
		<l--定义插倍-->
		<slot name="center">插福就认内容...</slot>
		<slot namo="footer">插福默认内容...</slot>
	</div>
</template>

    2. 作用域插槽

      1. 理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

      2. 具体编码：

        父组件中:
<category>
	<template scope="scopeData"">
		<!--生成的是ul列表-->
		<ul>
			<li v-for="g in scopeData.games" : key="g">{lg3]</li>
		</ul>
	</template>
</Category>

<category>
	<template slot-scope="scopeData">
		<!--生成的是h4标题-->
		<h4 v-for="g in scopeData.games" : key="g">iig)]</h4>
	</template>
</category>

子组件中:
<template>
	<div>
		<slot :games="games"></slot>
	</div>
</template>

<script>
export default {
	name: " Category " ,
	props: ['title'],
	props : ["title"],
	//数据在子组件自身data
	data(){
		return{
			games: ["红色警戒","穿越火线","劲舞团","超级玛丽"]
		}
	},

}
</script>

18. Vuex

1. 概念：

在Vue中实现集中式状态（数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读写)，也是一种组件间通信的方式，且适用于任意组件间通信。

2. 何时使用？

多个组件需要共享数据时

3. 搭建vuex环境

  1. 创建文件：src/store/index.js

    //引入Vue核心库
import Vue from "vue"
//引入Vuex
import Vuex from "vuex"
//应用vuex插件
vue.use(vuex)

//准备actions对象—响应组件中用户的动作
const actions = {}
//准备mutations对象—修改state中的数据
const mutations = {}
/准备state对象—保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

  2. 在 main.js中创建vm时传入 store配置项

    ......
//引入store
import store from './store"
......

//创建vm
new vue({
    el: "#app',
    render: h => h(App),
    store
})

4. 基本使用

  1. 初始化数据，配置actions、配置mutations、操作文件store.js

    //引入vue核心库
import Vue from "vue"  
//引入Vuex
import Vuex from "vuex"  
//引用vuex
Vue.use(Vuex)

const actions = {
	//响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit( 'JIA',value)
	}
}

const mutations = {
	//执行加
	JIA(state,value){
		// console.log('mutations中的IA被调用了',state, value)
		state.sum += value
	}
}

//初始化数据
const state = {
	sum:0
}

//创建并暴露store
export default new vuex. Store({
	actions,
	mutations,
	state,
})

  2. 组件中读取vuex中的数据:$store.state.sum

  3. 组件中修改vuex中的数据:$store.dispatch('action中的方法名' ,数据)或 $store.commit('mutations中的方法名 ,数据)

备注:若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5. getters的使用

  1. 概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。

  2. 在store.js中追加getters配置

          const getters = {
          bigSum(state){
              return state.sum * 10
      }
      //创建并暴露store
      export default new Vuex.Store({
          ......
          getters
      })

  3. 组件中读取数据:$store.getters.bigSum

6. 四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed{
    // 借助mapState生成计算属性，从state中读取数据 (对象写法)
    ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

    //借助mapState生成计算属性，从state中读取数据 (数组写法)
    ...mapState(['sum','school','subject']),
},

  2. mapGetter方法：用于帮助我们映射getters中的数据为计算属性

    computed{
    // 1️借助mapGetters生成计算属性，从getters中读取数据 (对象写法)
    ...mapGetters({bigSum:'bigSum'})
    // 2️借助mapGetters生成计算属性，从getters中读取数据 (数组写法)
    ...mapGetters(['bigSum'])
},

  3. mapActions方法:用于帮助我们生成与actions对话的方法，即:包含$store.dispatch(xxx)的函数

    // 1️⃣借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
...mapMutations({increment:'ADD',decrement:'MINUS'}),
// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
...mapMutations(['ADD','MINUS']), //需要把上方的函数名改掉

  4. mapMutations方法:用于帮助我们生成与mutations对话的方法，即:包含 $store.commit(xx)的函数

    // 2️⃣借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'}),
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
...mapActions(['addOdd','addWait'])

备注: mapActions与mapMutations使用时，若需要传递参数需要:在模板中绑定事件时传递好参数，否则参数是事件对象。

7. 模块化+命名空间

  1. 目的:让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {
    namespaced:true, //开启命名空间
    state:[x:1],
    mutations: { ... },
    actions: { ... },
    getters:{
        bigSum(state){
            return state.sum * 10
        }
    }

    const personAbout = {
        namespaced:true,  //开启命名空间
        state:{ ... },
        mutations: { ... },
        actions:{ ... },
    }

    const store = new Vuex.Store({
        modules:{
            countAbout,
            personAbout
        }
    })

  3. 开启命名空间后，组件中读取state数据:

    //方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject'])

  4. 开启命名空间后，组件中读取getters数据:

    //方式一:自己直接读取
this.$store .getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一:自已直接dispatch
this.$store.dispatch('personAbout/ addPersonwang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementwait:'jiawait'})

  6. 开启命名空间后，组件中调用commit

    //方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})，

19. 路由

  1. 理解:一个路由（route)就是一组映射关系(key - value)，多个路由需要路由器（router)进行管理。
  2. 前端路由: key是路径，value是组件。

1. 基本使用

  1. 安装vue-router，命令:npm i vue-router
  2. 应用插件:vue.use(VueRouter)
  3. 编写router配置项:
    import VueRouter from 'vue-router'
import MyAbout from '../components/MyAbout.vue'
import MyHome from '../components/MyHome.vue'
// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:MyAbout
        },
        {
            path:'/home',
            component:MyHome
        },
    ]
})
  4. 实现切换(active-class可配置高亮样式)
    <router-link active-class="active" to="/about">About</router-link>
  5. 指定展示位置
    <router-view></router-view>

2. 几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹,
  2. 通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有白己的 $route属性，里面存储石白己的路由信息。
  4. 整个应用只有一个router，可以通过组件的 $router属性获取到。

3. 多级路由（嵌套路由）

  1. 配置路由规则，使用children配置项

    routes:[
    {
        path:'/about',
        component:MyAbout
    },
    {
        path:'/home',
        component:MyHome,
        children:[ //通过children配置子级路由
            {
                path:'news', //此处一定不要写/news
                component:MyNews
            },
            {
                path:'message',
                component:MyMessage
            },
        ]
    },
]

  2. 跳转（要写完整路径）：
    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

4. 路由的query参数

  1. 传递参数

    <!-- 跳转路由并携带query参数，to的字符串写法-->
<router-link :to="`/home/message/detail?id=${m.id}&tittle=${m.tittle}`">{{m.tittle}}</router-link>&nbsp;&nbsp;
<!-- 跳转路由并携带query参数，to的对象写法-->
<router-link :to="{
    path: '/home/message/detail',
    query: {
        id:666,
        tittle: hello
    }
}">
    跳转
</router-link>&nbsp;&nbsp;

  2. 接收参数

        $route.query.id
    $route.query.tittle

5. 命名路由

  1. 作用：可以简化路由的转跳
  2. 如何使用

    1. 给路由命名：

      {
    path:'/demo',
    component:Demo,
    children:[
        {
            path:'test',
            component:Test,
            children:[
                {
                    name:'hello',
                    path:'welcome',
                    component:Hello
                }
            ]
        }
    ]
}

    2. 简化转跳

      <!--简化前，需要写完整的路径-->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后,直接通过名字跳转-->
<router-link :to=""(name : " hello"}">跳转</router-link>
<!--简化写法配合传递参数-->
<router-link
    :to="{
        name : " hello" ,+
        query :{
            id:666,
            title: "你好"
        }
    }"
>跳转</router-link>

6. 路由的params参数

  1. 配置路由，声明接收params参数

    {
    path: '/home',
    component: MyHome,
    children: [{
            path: 'news',
            component: MyNews
        },
        {
            path: 'message',
            component: MyMessage,
            children: [{
                name: 'xiangqing',
                path: 'detail/:id/:tittle',  //❗使用占位符声明接收params参数
                component: MyDetail
            }]
        },
    ]
},

  2. 传递参数

    <!--跳转路由并携带query参数，to的字符串写法-->
<router-link :to="`/home/message/detail/${m.id}/${m.tittle}`">{{m.tittle}}</router-link>&nbsp;&nbsp;

<!--跳转路由并携带query参数，to的对象写法-->
<router-link :to="{
    // path: '/home/message/detail',
    // ❗当使用params传值时，不能用path方式
    name:'xiangqing',
    query: {
        id: m.id,
        tittle: m.tittle
    }
}">
    {{ m.tittle }}
</router-link>&nbsp;&nbsp;

    特别注意:路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置!

  3. 接收参数

    {{$route.params.id}}
{{$route.params.tittle}}

7. 路由的props配置

作用：让路由组件更方便的收到参数

    name: 'xiangqing',
    path: 'detail/:id/:tittle',
    component: MyDetail,
    // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给MyDetail组件
    props:{a:1,b:'hello'}

    // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给MyDetail组件
    props:true

    // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给MyDetail组件
    props($route){
        return {id:$route.query.id,tittle:$route.query.tittle}
    }

  1. <router-link>的replace属性

    1. 作用:控制路由跳转时操作浏览器历史记录的模式
    2. 浏览器的历史记录有两种写入方式:分别为push和replace， push是追加历史记录，replace 是替换当前记录,路由跳转时候默认为push
    3. 如何开启replace模式: <router-link replace .......>News</router-link>

  2. 编程式路由导航

    1. 作用:不借助<router-link>实现路由跳转，让路由跳转更加灵活
    2. 具体编码：
      this.$router.push({
        name: 'xiangqing',
        query: {
            id: m.id,
            tittle: m.tittle
        }
    })
this.$router.replace({
        name: 'xiangqing',
        query: {
            id: m.id,
            tittle: m.tittle
        }
    })
this.$router.back() //后退
this.$router.forward() //前进
this.$router.go(3)  //正数前进，负数后退

  3. 缓存路由组件

    1. 作用:让不展示的路由组件保持挂载，不被销毁
    2. 具体编码:(include里写得是组件名,不写的时候是全部都挂载)
    <keep-alive include="MyNews"> //缓存多个时写 :include="['MyNews','MyMessage']"
    <router-view></router-view>
</keep-alive>

  4. 两个新的生命周期钩子

    1. 作用:路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
    2. 具体名字:
      1. activated路由组件被激活时触发。
      2. deactivated路由组件失活时触发。

  5. 路由守卫

    1. 作用:对路由进行权限控制

    2. 分类:全局守卫、独享守卫、组件内守卫

    3. 全局守卫:

      // 全局前置路由守卫——初始化+每次路由切换之前调用
router.beforeEach((to, from, next) => {
    // to and from are both route objects. must call `next`.
    console.log('前置路由守卫', to, from);
    if (to.meta.isAuth) { //判断是否需要鉴定权限
        if (localStorage.getItem('code') === '123') {
            next() //放行
        } else alert('No access')
    } else {
        next() // 放行
    }

})

// 全局后置路由守卫——初始化+每次路由切换之后前调用
router.afterEach((to, from) => {
    // to and from are both route objects.
    console.log('后置路由守卫', to, from);
    if (to.meta.tutle) {
        document.title = to.meta.title || '首页'; //修改网页的title
    }else{
        document.title = 'vue_test'
    }
})

    4. 独享守卫：

      beforeEnter:(to,from,next) =>{
    console.log('独享路由守卫', to, from);
    if (to.meta.isAuth) { //判断是否需要鉴定权限
        if (localStorage.getItem('code') === '123') {
            next() //放行
        } else alert('No access')
    } else {
        next() // 放行
    }
}

    5. 组件内守卫：
      离开守卫和全局后置守卫规则不同，离开守卫是在点到别的地方离开组件的时候有用

      // 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {},

 // 离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {},

  6. 路由器的两种工作模式

    1. 对于一个url来说，什么是hash值?——#及其后面的内容就是hash值.
    2. hash值不会包含在HTTP请求中，即: hash值不会带给服务器。
    3. hash模式:
      1. 地址中永远带着#号，不美观。
      2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
      3. 兼容性较好。
    4. history模式:
      1. 地址干净，美观。
      2. 兼容性和hash模式相比略差。
      3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

自学笔记

vuejs

javascript

前端

Vue_test 的相关文章

随机推荐

  • lvgl8.2 img 图片显示

    1 lvgl 图片显示源 为了提供良好的图片显示灵活性 所以显示图像的来源可以是以下三种 代码中的一个变量 一个带有像素颜色数据的 C 数组 存储在外部的文件 比如 SD 卡 带有符号的文本 2 内部图片 对于源码内部图片 将图片转换为图片

  • 前端自动化测试——vue单元测试vue-test-utils

    自动化测试分类 单元测试 单元测试 unit testing 是指对软件中的最小可测试单元进行检查和验证 简单来说 单元就是人为规定的最小的被测功能模块 可能是一个单一函数或方法 一个完整的组件或类 单元测试是最小巧也是最简单的测试 它们通

  • paddlelite编译python版： FIND_PACKAGE called with invalid argument或者fatal: no tag exactly matches 。【已解决】

    报错1 不是这个原因 这个错误不会影像编译 fatal no tag exactly matches 518238f89e84868d666b5cbe6860788934f290d7 tag branch develop commit 51

  • TCP flag注释

    http blog csdn net wisage article details 6049733 三次握手Three way Handshake 一个虚拟连接的建立是通过三次握手来实现的 1 B gt SYN gt A 假如服务器A和客户

  • 【华为OD机试】寻找相同子串(C++ Python Java)2023 B卷

    时间限制 C C 1秒 其他语言 2秒 空间限制 C C 262144K 其他语言524288K 64bit IO Format lld 语言限定 C clang11 C clang 11 Pascal fpc 3 0 2 Java jav

  • 若依系统(Ruoyi-Vue)去除redis数据库

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 目的 一 去除redis 配置 二 去除ruoyi framework下RedisConfig的配置 三 在ruoyi common的core redis下新建My

  • 领域驱动设计-Domain-Driven-Design概念

    2021了 你应该要了解DDD了 不然领导和你吹牛你都听不懂 或者你都没法和别人吹牛了 一 Evans DDD 是什么 1 1 背景 2002年 敏捷宣言诞生 时代处于 CS 到 BS 的转换时期 2003年 Eric Evans 发表 l

  • angular?!小白修仙之路……

    一 简介 Angular是一个功能非常完备的前端框架 最早由 Misko Hevery 等人创建 2009 年被Google 公式收购 用于其多款产品 Angular基于TypeScript 通过增强HTML的方式提供一种便捷开发Web应用

  • 【100%通过率 】【华为OD机试 c++ 】不含 101 的数【2023 Q1

    华为OD机试 题目列表 2023Q1 点这里 2023华为OD机试 刷题指南 点这里 题目描述 小明在学习二进制时 发现了一类不含 101的数 也就是 将数字用二进制表示 不能出现 101 现在给定一个整数区间 l r 请问这个区间包含了多

  • 【python 多线程存数据lock（锁）】

    多线程存数据不会数据丢失 案例一 这里只是简单的线程池 import os from concurrent futures import ThreadPoolExecutor from time import perf counter im

  • PTA-计算工资

    计算工资 某公司员工的工资计算方法如下 一周内工作时间不超过40小时 按正常工作时间计酬 超出40小时的工作时间部分 按正常工作时间报酬的1 5倍计酬 员工按进公司时间分为新职工和老职工 进公司不少于5年的员工为老职工 5年以下的为新职工

  • TypeScript 之类型判断

    在使用 Angular 做项目的时候 对 TypeScript 的类型判断不太熟练 为了方便查找 特意对 TypeScript 的类型判断做了简单梳理 文章只是 TS 官网的内容摘要 没有高深的知识 想要深入学习 TS 还要看官网文档 基础

  • 18M 超轻量系统开源

    图像识别作为深度学习算法的主流实践应用方向 早已在生活的各个领域发挥作用 如安全检查和身份核验时的人脸识别 无人货架和智能零售柜中的商品识别 这些任务背后的关键技术都在于此 图1 PP ShiTu应用于商品识别效果示意 开发者应用展示 然而

  • JMeter压测原则之独立部署监控

    无论是用哪种压测工具 我们都会比较关心压测工具所在机器的的系统资源占用情况 毕竟很多人压着压着 压力机出现性能瓶颈了还不知道 并且还错误的评估成是被测系统的性能问题 很多初学者好像都犯过这种尴尬的错误 文章分成三个部分说明 为什么说Perf

  • a &a &a[0]之间的区别和联系

    数组中 a为数组的首地址 a 0 为数组第一个元素的地址 所以 a a 0 但是 a又是什么东西呢 我们来做下面的代码测试 include

  • Binary operator ‘==‘ cannot be applied to operands of type ‘Int‘ and ‘[Int]‘

    等号两边数据类型不一致进行比较报错 Binary operator cannot be applied to operands of type Int and Int 这个提示也挺明确 二元运算符 两边不能使用 Int 和 Int 写代码时

  • c++ socket、 listen、accept、recv 、send、 connect函数记录

    文章目录 socket bind 和connect 函数 listen 和accept 函数 send recv read 和write 函数 TCP客户端 Tcp服务端 socket int socket int domain int t

  • 如何进行代码审查？

    如何review开发人员的代码 前置的一些概念 review级别 参与人身份和方式不同划分 相关开发自己看代码 非正式会议 开发人员组内 相关开发 直接上级 相关开发 直接上级 总监 1 团队review制度 团队内根据实际情况规定流程 在

  • 与机器学习相关的数学家，你认识几个？

    机器学习 需要一定的数学基础 也需要一定的代码能力 我们发布了一篇 机器学习的数学基础 里面有很多数学公式是数学家的名字命名的 然而 好多人不知道那些数学家长什么样子 于是 我们搜集了十位数学家的资料 排名不分先后 看看大家能从图片中叫出几

  • Vue_test

    文章目录 vue test笔记 1 脚手架文件结构 2 关于不同版本的Vue 3 vue config js配置文件 4 ref属性 5 配置项props 6 mixin 混入 7 插件 8 scoped样式 9 总结TodoList案例

热门标签