标签：Vue 框架 对象 setup xxx 路由 组件 store
Vue框架
Vue-router路由
vue3项目红如何配置路由
1.下载vue-router，在路由文件中引入相关依赖
2.创建路由信息对象数组
3.创建路由管理器对象并对外抛出
4.在main.js使用use(router)方法，将路由管理对象与当前vue项目相关联
5.在项目中设置路由导航router-link与路由出口router-view
常见面试题：route、routes、router的区别
route：一组路由信息对象
{path: '/foo', component: Foo}
routes：路由信息对象数组
const routes: [
{path: '/', redirect: '/bar'},
{path: '/bar', component: Bar},
{path: '/foo', component: Foo},
{path: '/user', component: User}
]
router：路由管理器对象
const router = createRouter({ })
动态路由
定义：我们经常需要把某种模式匹配到所有路由，全都映射到同个组件
例如，我们有一个user组件，对于所有ID各不相同的用户，都要用这个组件来渲染
一个[路径参数]使用冒号：标记；
可以在一个路由中设置多端[路径参数]
动态路由的传参
1.params传参
定义动态路由
传输参数
接收参数
props传参
值为布尔值的形式
定义动态路由
传输参数
接收参数
值为函数的形式
动态路由切换时的特点
-动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用
已经渲染过的路由组件（知识会修改路由参数值），这样增加了程
序的高效及时性
-另一方面，组建的生命周期钩子回调函数不会再次调用
如何解决
状态管理库vuex
Vuex是一个专为Vue.js应用程序开发的状态管理库。状态就是指组件之间共享的数据
vue项目中配置状态管理库vuex的流程
1.下载并引入vuex相关内容
2.创建状态管理库对象store
3.对外抛出store对象
4.在main.js中将store对象与当前项目相关联
store状态管理库重要组成部分
state：组件之间共享的数据集合
组件中获取方法
1.直接获取
this.$sotre,state.user
2.使用对象含开运算符的形式
...mapState(['count','user'])
getters:相当于store对象计算属性（主要用于对state的数据进行过滤）
组件中获取方法
1.直接获取
this.$store.getters.xxx;
2.使用对象展开运算符的形式获取
...mapGetters(['xxx','xxx'])
mutation：定义了修改store对象中的state数据的同步方法(要修改的数据不是Ajax异步获取的)
组件中如何触发
1.直接用commit触发
this.$store.commit('xxx','传递参数')
2.使用对象展开运算符mapMutations的形式获取
...mapMutations(['xxx','xxx'])
actions:定义了修改state数据的异步方法(修改数据是Ajax获取的异步数据)
组件中如何触发
1.直接用dispatch触发
this.$store.dispatch('xxx','传递参数')
2.使用对下昂展开运算符mapActions的形式获取
...mapActions(['xxx','xxx'])
合成APIsetup()
Vue3最重要新特性之一
作用：之前vue对象规定了我们必须把某一类数据放到某一个机构中，这样在一定程度上对我们的代码进行了强制的分割。
在vue3中，我们引入了setup()合成API语法，它可以将某数据关联的内容都整合到一个部分，即使setup()中的内容越来越多，也会围绕大而不乱的形式开发项目
setup()特点
1.setup()结构中定义的变量，函数都需要return 之后才可以在模板中使用
2.setup()API是处于created()生命周期之前的函数，也就是说data，methods中的数据时无法访问到的，setup()结构中的this指向undefined
ref：在setup中只能包装字符串或数字形式的数据使其变为响应式布局
reactive： 在setup中包装对象，数组形式的数据（对象/数组），使其变成响应式数据
refs：可以直接在html模板中使用对象的属性名当变量，不需要用.访问
setup()结构中如何使用声明周期函数(vue3.0)
标签：Vue,框架,对象,setup,xxx,路由,组件,store 来源： https://www.cnblogs.com/coisini123/p/16258096.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。