vue router 路由栈,Vue-router
这篇文章主要介绍了vue3中路由器路由以及状态管理的商店使用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue3路由器路由及状态管理商店使用1.路由2.vuexvue3中路由器路由和状态管理的商店使用，获取对象基本使用vue3中路由器和商店使用方法1、企业开发路由器全局配置2、企业开发商店全局配置功能快捷键
vue3 router路由及vuex store使用
1.路由
脚本
从“vue路由器"导入{ useRouter，useRoute }
导出默认值{
setup() {
const router=useRouter() //组件内路由
const route=user route()//组件内路由信息
}
}
/脚本
2.vuex
创建商店
从" vuex "导入{ createStore }
从导入登录。/登录
const store=createStore({
状态：{},
突变：{},
动作：{},
模块：{
注册
}
})
导出默认存储
组件内使用商店
脚本
从" vuex "导入{ useStore }
导出默认值{
setup() {
const store=useStore()
常量状态=商店.州
常量方法={
//处理犯罪
handleMutation: ()={
存储。提交（.)
},
//处理派遣
handleAction: ()={
商店配送（.)
}
}
返回{
.方法
}
}
}
/脚本
vue3中router路由和vuex的store使用，获取对象基本使用
vue3中router和store使用方法
因为在vue3的设置内不能使用这对象，所有所有直接通过这来访问的方法都不能使用了。
那么在vue3中怎么访问这是你的或者高速路由器或者这个路由器或者这条路线呢？
记住一条规则：vue3中基本上所有通过这来访问的对象都换成使用Xxx的方式来获取。
比如说路由器，可以通过用户外部和用户路由来获取路由器，路由对象
1、企业开发Router全局配置
企业开发中在src/路由器/索引. js中全局配置，并在主页。射流研究…中添加到某视频剪辑软件对象
从" vue路由器"导入{ createRouter，创建web历史}。
//路由规则
常量路由=[
{
路径："/",
名称： 主页，
meta: [istabbar]，
组件：()=导入(./views/home。vue’)，
},
];
//根据路由规则创建路由
const router=createRouter({
history: createWebHistory( )，
路线，
});
导出默认路由器；
在主页。射流研究…中添加到某视频剪辑软件对象
从“vue”导入{创建应用}；
从导入应用程序. 1/app。vue ；
从导入路由器./路由器；//添加路由路由器引入
//创建VUE对象
创建应用程序。使用（路由器)//使用。使用（路由器)添加路由路由器。挂载( # app )；
配置完后就可以全局使用了
1.1、Router获取及使用
先引入某视频剪辑软件路由器，再获取对象：
从" vue路由器"导入{用户外部}；
const router=user outer()；
但是这也不是唯一的方法，传统的和VUE3的使用方法如下：
这里提供了三种方法用于获取路由器对象
模板
div class=page
因为在设置内部没有这访问权限，不能直接使用这访问这个。$路由器或者
这个。$路线。所有使用用户外部，用户外部来获取
/div
/模板
脚本
从“vue”导入{ getCurrentInstance }；
从" vue路由器"导入{用户外部}；
导出默认值{
setup() {
//第一种方法：获取路由对象路由器的方法一
const vue=getCurrentInstance()；
const路由器1=vue。CTX。$路由器；
//第二种方法：获取路由对象路由器的方法2
const router 2=user outer()；
//下面提供了路由器对应的方法使用大全
//-
//路由器1。添加路由(parentOrRoute，route)
//router1.afterEach(回调函数)
//router1.back()等价于go(-1)
//router1.beforeEach(回调函数)
//router1.beforeResolve(回调函数)
//router1.currentRoute获取当前路由：如：{_rawValue: {…}，_shallow: true，__v_isRef: true，_value: {…}}
//router1.forward()等价于去吧(1)
//路由器1。获取路线：获取路线()
//router1.go(delta)等价于routerHistory.go(delta)跳到指定历史记录
//router1.hasRoute(名称)判断是否有对应的路由
//router1.isReady()确定路由是否准备好跳转。
//发生错误时执行router1.onError(回调函数)。
//router1.options获取所有路由信息{history: {…}，routes: Array(5)}
//router1.push(to)跳转到指定路由对应的页面，带有历史记录。
//router1.removeRoute(name)动态删除路由。
//router1.replace(to)直接跳转到指定的路由页面，没有历史。
//Router1。Resolve(原始位置，当前位置)可以自定义跳转参数的方法。
return { }；
},
已安装(){
//第三种方法：方法3获取路由对象路由器
console.log(这个。$路由器)；
},
};
/脚本
1.2、Route获取及使用
先介绍vue-router，然后获取对象：
从“vue-router”导入{ user outer }；
const router=user outer()；
但这不是唯一的方法。传统和VUE3使用方法如下：
有三种方法可以获得路由器对象。
模板
div class=page
因为在设置中没有此访问权限，所以您不能直接访问它。$路由器或
这个。$路线.使用所有useRouter、useRoute来获取
/div
/模板
脚本
从“vue”导入{ getCurrentInstance }；
从“vue路由器”导入{ user oute }；
导出默认值{
setup() {
//第一种方法：方法1获取路由对象路由器
const vue=getCurrentInstance()；
const route 1=vue . CTX . $ router . current route . value；
console . log(route 1)；
//第二种方法：方法2获取路由对象路由器
const route 2=user route()；
console . log(route 2)；
//下面提供了与route对应的属性的完整用法。
//-
//full path:“/user”完整的路由路径
//哈希：“”定位点部分
//href:“/user”跳转到此处时的路径。
//matched: [{…}]路线匹配的日常规则数组
//meta: {0: istabbar}路由附加元数据
//name:“个人中心”路由的名称
//params: {0}路由跳转时带来的附加参数。如果是对象，需要转换成JSON格式。
//path:“/user”对URL的路径名部分进行编码，该部分与路由地址相关
//查询：{}附加到地址的参数
//redirectedFrom: undefined在跳转之前重定向地址，如果没有重定向，则为undefined。
return { }；
},
已安装(){
//第三种方法：方法3获取路由对象路由器
console.log(这个。$ route)；
},
};
/脚本
2、企业开发Store全局配置
企业开发中src/store/index.js中的全局配置，并添加到main.js中的Vue对象
从“vuex”导入{ createStore }；
//创建一个存储对象
导出默认的createStore({
//所有需要存储的值都放在里面。
state() {
返回{
Count: 0，//通过视图中的$store.state.count获取
};
},
//在其他视图中通过$store.commit(setState ，10)来修改stor的存储值。
突变：{
SetState(state，count) {//只能接受两个参数，这两个参数用于修改存储在存储区中的值。
state.count=count
},
},
//相当于组件的计算属性，通过$ store.getters.doublecount获取计算值。
getters: {
双重计数(州){
返回state . count * 2；
},
},
//异步任务不改变状态。通过$store.dispath(doubleCount )使用它
动作：{
双重计数(上下文){
context . commit(“double count”)；
},
},
//store的下级store方便大型项目复杂的数据管理，相当于在外面放了一个类似于那些的模块。
模块：{}，
});
添加到main.js中的Vue对象
从“vue”导入{ create app }；
从导入应用程序。/app . vue ；
从导入路由器。/router ；//添加路由路由器简介
从导入存储。/store ；//添加全局存储vuex简介
//创建一个VUE对象
创建应用程序。使用(路由器)//使用。使用(路由器)添加路由器。use(store) //使用。使用(store)添加全局存储vuex。挂载( # app )；
配置后，可以全局使用。
2.1、Store获取及使用
先介绍vuex，再获取对象：
从“vuex”导入{ use store }；
const store=use store()；
有三种方法可以获得路由器对象。
模板
div class=page
因为在设置中没有此访问权限，所以您不能直接访问它。$路由器或
这个。$路线.使用所有useRouter、useRoute来获取
/div
/模板
脚本
从“vue”导入{ getCurrentInstance }；
从“vuex”导入{ use store }；
导出默认值{
setup() {
//第一种方法：方法1获取路由对象路由器
const vue=getCurrentInstance()；
const store 1=vue . CTX . $ store；
console . log(store 1)；
//第二种方法：方法2获取路由对象路由器
const store 2=use store()；
console . log(store 2)；
//提供以下内容：store对应的属性的完整集合。
//-
//commit(type，payload，options2)使用在其他视图的突变中定义的方法。
//dispatch(type，payload)异步任务不会更改其他视图中state使用的actions中定义的方法。
//getters: {}通过$ store.getters.doublecount等效于组件的calculated属性的计算值。
///状态： (.)store value存储在store中，这就是如何在视图中获取存储在store中的值。
return { }；
},
已安装(){
//第三个方法：获取路由对象存储的方法3
console.log(这个。$ store)；
},
};
/脚本
功能快捷键
撤消：Ctrl/Command Z重做：Ctrl/Command Y粗体：Ctrl/Command B斜体：Ctrl/Command I标题：Ctrl/Command Shift H无序列表：Ctrl/Command Shift U有序列表：Ctrl/Command o检查列表：Ctrl/Command Shift C插入代码：Ctrl/Command Shift K插入链接：Ctrl/Command Shift L插入图片：Ctrl/Command Shift G查找：Ctrl/F命令替换：Ctrl/Command G以上是个人经验，希望能给你一个参考，也希望你能支持我们a
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。