Vue.js 缓存路由组件
摘要：视频 10.缓存路由组件 作用：让不展示的路由组件保持挂载，不被销毁。 具体编码： <keep-alive include="News"> <router-view></router-view> </keep-alive> News.vue Home.vue Message.vue #compone
阅读全文
posted @
2023-04-12 21:20
垂序葎草
阅读(63)
推荐(0) 编辑
Vue.js 编程式路由导航
摘要：视频 router-link 最后会转成 标签， 有时候页面不是a标签就不能用router-link来写 9.编程式路由导航 作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活 具体编码： //$router的两个API this.$router.push({ name:'xi
阅读全文
posted @
2023-04-12 20:49
垂序葎草
阅读(45)
推荐(0) 编辑
Vue.js router-link的replace属性
摘要：视频 8.<router-link>的replace属性 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-lin
阅读全文
posted @
2023-04-12 16:16
垂序葎草
阅读(19)
推荐(0) 编辑
Vue.js 路由的props配置
摘要：视频 index.js(解构赋值，连续解构赋值) Message.vue 7.路由的props配置 作用：让路由组件更方便的收到参数 { name:'xiangqing', path:'detail/:id', component:Detail, //第一种写法：props值为对象，该对象中所有
阅读全文
posted @
2023-04-12 13:20
垂序葎草
阅读(83)
推荐(0) 编辑
Vue.js 路由的params参数
摘要：视频 6.路由的params参数 配置路由，声明接收params参数 { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:
阅读全文
posted @
2023-03-29 12:34
垂序葎草
阅读(386)
推荐(0) 编辑
Vue.js 命名路由
摘要：视频 5.命名路由 作用：可以简化路由的跳转。 如何使用 给路由命名： { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'
阅读全文
posted @
2023-03-29 12:20
垂序葎草
阅读(35)
推荐(0) 编辑
Vue.js 路由的query参数
摘要：视频 4.路由的query参数 传递参数 <!-- 跳转并携带query参数，to的字符串写法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数，to的对象写法
阅读全文
posted @
2023-03-29 12:10
垂序葎草
阅读(168)
推荐(0) 编辑
Vue.js 嵌套（多级）路由
摘要：视频 3.多级路由（多级路由） 配置路由规则，使用children配置项： routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { pa
阅读全文
posted @
2023-03-29 03:58
垂序葎草
阅读(162)
推荐(0) 编辑
Vue.js 路由几个注意点
摘要：视频 2.几个注意点 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。 每个组件都有自己的$route属性，里面存储着自己的路由信息。 整个应用只有一个router，可以通过组件的$router
阅读全文
posted @
2023-03-29 03:52
垂序葎草
阅读(16)
推荐(0) 编辑
Vue.js 路由的基本使用
摘要：npm i router@3 1.基本使用 安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编写router配置项: //引入VueRouter import VueRouter from 'vue-router' //引入Luyou
阅读全文
posted @
2023-03-29 03:39
垂序葎草
阅读(23)
推荐(0) 编辑
Vue.js 路由简介
摘要：路由 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径，value是组件。
阅读全文
posted @
2023-03-24 11:29
垂序葎草
阅读(12)
推荐(0) 编辑
Vue.js Vuex模块化
摘要：Count组件视频115 Person组件视频116 7.模块化+命名空间 目的：让代码更好维护，让多种数据分类更加明确。 修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }
阅读全文
posted @
2023-03-24 11:08
垂序葎草
阅读(57)
推荐(0) 编辑
Vue.js 多组件共享数据
摘要：视频 #components ##Count.vue <template> <div> <h1>当前求和为：{{sum}}</h1> <h3>当前求和放大10倍为：{{bigSum}}</h3> <h3>我在{{school}}，学习{{subject}}</h3> <h3 style="color
阅读全文
posted @
2023-03-24 02:40
垂序葎草
阅读(31)
推荐(0) 编辑
Vue.js 求和案例-mapActions和mapMutations
摘要：视频 mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数 methods:{ //靠mapActions生成：incrementOdd、incrementWait（对象形式） ...mapActions({incrementO
阅读全文
posted @
2023-03-24 02:34
垂序葎草
阅读(90)
推荐(0) 编辑
Vue.js 求和案例-mapState和mapGetters
摘要：视频 6.四个map方法的使用 mapState方法：用于帮助我们映射state中的数据为计算属性 computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subje
阅读全文
posted @
2023-03-24 01:33
垂序葎草
阅读(135)
推荐(0) 编辑
Vue.js 求和案例-getter配置项
摘要：视频 逻辑复杂且跨组件使用 5.getters的使用 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。 在store.js中追加getters配置 ...... const getters = { bigSum(state){ return state.sum * 10
阅读全文
posted @
2023-03-24 01:13
垂序葎草
阅读(36)
推荐(0) 编辑
Vue.js Vuex开发者工具的使用&Vuex写法一些疑问
摘要：视频 4.基本使用 初始化数据、配置actions、配置mutations，操作文件store.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //引用Vuex Vue.use(Vuex) const acti
阅读全文
posted @
2023-03-24 00:52
垂序葎草
阅读(50)
推荐(0) 编辑
Vue.js 求和案例-Vuex实现
摘要：视频 #Vuex版本 ##components ###Count.vue <template> <div> <!-- 模板里能看见vc上所有东西 --> <h1>当前求和为：{{$store.state.sum}}</h1> <select v-model.number="n"> <option v
阅读全文
posted @
2023-03-23 22:52
垂序葎草
阅读(51)
推荐(0) 编辑
Vue.js 搭建Vuex环境
摘要：视频 npm i vuex@3 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti
阅读全文
posted @
2023-03-23 22:35
垂序葎草
阅读(52)
推荐(0) 编辑
Vue,js Vuex工作原理图
摘要：Vuex原理解析视频107 传参带数据允许走这条线 store管理
阅读全文
posted @
2023-03-23 22:01
垂序葎草
阅读(69)
推荐(0) 编辑
