标签：vue 对象 路由 nbsp router store user
vue3项目中如何配置路由
1、下载vue-router，在路由文件中引入相关依赖
import{createRouter , createWebHashHistory} from "vue-router";
2、创建路由信息对象数组
const routes=[{path: ' /bar ' ,component:Bar},{path: ' /foo ' ,component:Foo},{path: ' /user ' ,component: User},
3、创建路由管理器对象并对外抛出
const router=createRouter(options:{history : createWebHashHistoryO,routes})//将路由管理器对象对外抛出export default router
4、在main.js使用use(router)方法，将路由管理器对象与当前vue
createApp(App).use(router).mount( rootContainer: ' #app ')
5、在项目中设置路由导航router-link与路由出口router-view
<template><router-link to="/bar">bar menu </router-link><router-link to="/foo">foo menu </router-link><template>
<router-link to="/bar">bar menu </router-li
nk>
<router-link to="/foo">foo menu </router-li
nk>
<router-link to="/user/1/tom/18">user 1 </router-link><router-link to="/user/2/bob/20">user 2 </router-link>
<router-link to=" /user/3/mary/21">user 3</router-link><router-view/>
</template>
常见面试题:route、routes、router的区别
route:一组路由信息对象
{ path: '/foo', component: Foo }
routes:路由信息对象数组
const routes = [{ path: '/foo' , component: Foo },{ path: '/bar", component: Bar },{ path: '/user', component: User }
router:路由管理器对象
const router = createRouter({}
动态路由
定义:我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如:我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。
一个『路径参数』使用冒号:标记;
{path: ' /user/ :id/ : name / : age ' , component: User},
<router-link to="/user/1/tom/18"'>user-1 </router-link><router-link to="/user/2/bob/20">user-2 </router-link><router-link to=" /user/3/mary/21">user-3</router-link>link>
可以在一个路由中设置多段『路径参数』
动态路由的传参
1、params传参
定义动态路由
{path: ' /user/ :id/ : name / : age ' , component: User},
传输参数
<router-link to=" /user/2/bob/20">user-2 </router-link><router-link to="/user/3/mary/21">user-3</router-link>
接受参数
<div><p>用户id--- {{ $route.params.id }}</p><p>用户名称---{{$route. params.nane )}}</p><p>用户年龄---{{ $route.params.age }}</p></div>
2、props传参
值为布尔值的形式
定义动态路由
{path : ' /user/ : id/ : name / : age ' ,component: User , props:true},
传输参数
<router-link to=" /user/2/bob/20">user-2 </router-link><router-link to="/user/3/mary/21">user-3</router-link>
接受参数
path: ['id', ' name ' , ' age ' ]
值为函数的形式
组件之间的数据通信
父了组件之间数据通信
第一种:父-->了props传连数据:了-->父触发白定义事件的形式
Parent<--->Child
第二种: provide.….inject告构
父姐件provide抛出数据，了细件inject接收数据
非父子组件之间的数据通信
第一种:事件总线Bus(全vue对象)
第二种;状态管理库vuex
vue3合成API-----setup()
vue3最重要的特性之一
vue作用：之前vue对象规定了我们必须把某一类数据放到某一个结构，这样在一定程度上对我们的代码进行了强制的分割。在vue3中我们引入例如setup()合成API语法，他可以将某数据关联的内容都整合到一个部分，即使setup()中的内容越来越多，也会围绕着大而不乱的形式开发项目。
setup()特点用
1、setup()结构中定义的变量，函数都需要return之后才可以在模板中使用。ref:在setup中只能包装字符串或数字形式的数据〔值)，使其变为响应式数据。reactive 在setup中包装对象，数组形式的数据(对象/数组) ,使其变成响应式数据。oRefs可以直接在html模板中使用对象的属性名当变量，不需要用访问。
Steup中的周期函数
与2.x版本生命周期相对应的组合式API
(before是没有使用setup的使用，setup需要加on；)
created>使用setup()
beforeCreate>使用setup()//组件所有对象创建成功之后
beforeMount-> onBeforeMount· mounted -> onMounted//vue与model绑定成功之后
beforeUpdate -> onBeforeUpdate.updated -> onUpdated//vue与model数据更新之后
beforeDestroy -> onBeforeUinmount
destroyed -> onUnmounted
vue对象的生命周期函数(从创建到销毁的过程)
vue对象创建成功之前与创建成功之后
beforeCreate
created
vue对象(model)与页面dom元素(view)绑定成功之前与绑定成功之后
beforeMount
mounted
view或model数据更新之前与数据更新之后
beforeUpdate
Update
vue对象销毁之前与销毁之后
beforeDestory
destoryed
状态(组件之间共享的数据)管理库的流程:VUEX
Vuex是一个专为vue.js应用程序开发的状态管理库，状态就是指组件之间共享的数据
vue项目中配置状态管理库vuex的流程
1.下载并引入vuex相关内容
import { createStore} from "vuex";
2.创建状态管理器对象store
const store=createStore({})
3.对外抛出store对象
//对外跑出store对象
export default store
4.在main.js中将store对象与当前项目关联
//将配置好的store对象与当前vue相关联
createApp(App).use(router).use(store).mount('#app')
store状态管理对象重要组成部分
state:组件之间共享的数据集合
组件中获取方法
1.直接获取的形式this.$store.state.xxx
2.使用对象展开运算符的形式获取...mapState(['count','users'])
getters:相当于store对象计算属性(主要用于对state的数据进行过滤)
组件中获取方法
1.直接获取
getAdults(){
return this.$store.getters.adults
},
2.getters使用对象展开运算符
...mapGetters(['adults']),
mutations:定义了修改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']))
页面布局
PC端页面
盒模型+浮动(定位)
移动端页面
弹性布局(display:flex)
响应式页面
媒体查询
根据不同屏幕设备的宽度大小
响应式框架bootstarp
标签：vue,对象,路由,nbsp,router,store,user 来源： https://www.cnblogs.com/2423551404--lx/p/16258693.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。