Vue.js 做为一个面向 MVVM 的 JavaScript 框架，拥有很多核心对象，Vue$root 就是其中之一，它是 Vue.js 的根实例，也是组件的顶层根，是整个应用的载体和入口。
一、Vue$rooter
VueRouter 是 Vue.js 官方的路由器，它与 Vue.js 深度集成，为单页面应用提供高效的页面跳转方式。VueRouter 实例就是 Vue$root 的一个属性，它主要负责处理 URL 和组件的映射关系。
//创建VueRouter实例
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
const app = new Vue({
router
}).$mount('#app')
可以看到，VueRouter 被作为 Vue 根实例的一个属性，这种写法是为了让 VueRouter 参与到 Vue 的声明周期中。在实例化 Vue 的时候，VueRouter 实例会通过 router 属性被加入到 Vue 实例中，然后 Vue 实例会自动管理路由，把路由的钩子函数放到 Vue 的钩子函数中。
二、Vue$root页面栈修改
Vue 根实例通过 $router 和 $route 可以获取到相应的路由信息，其中 $route 用来描述当前路由的一些基础信息，包括路径、参数、查询、哈希、名称等；而 $router 实例则是 VueRouter 的实例，可以用来操作路由的跳转，比如路由的 push、replace、back 等等。
在实际开发过程中，可能会需要在 Vue 根实例中控制路由栈的变化，比如通过编写一个监听返回键的逻辑，控制路由的退栈。在Vue.js 2.x 版本中，可以通过 $router.back() 和 $router.go(n) API 控制路由栈，但在 Vue.js 3.x 版本中已经不再推荐这种操作方式，而建议通过调用 router 对象上的方法，实现路由与业务逻辑的高效耦合。
//将需要控制的路由信息放到路由跳转的 meta 字段中，在 router.beforeEach 实现监听返回键功能
router.beforeEach((to, from, next) => {
if (to.meta.goBack) {
window.history.go(-1)
} else {
next()
}
})
这里通过给需要控制的路由添加一个 meta 字段，在路由跳转钩子函数中实现了对路由栈的监听和退栈操作。
三、Vue$root选取
Vue 3 中，由于对组件实例进行了重新设计，Vue 2.X 中的 vm._root 被废除了，取而代之的是通过 app._container 获取到 Vue 根实例的节点并对其进行操作。
以下是一个基本的 Vue 3 例子。
const root = createApp(App)
root.use(router) //使用VueRouter插件
root.mount('#app') //挂载Vue根实例
在这个例子中，可以通过 createApp 方法创建一个 Vue 根实例，并使用 router 插件来创建并挂载 VueRouter 实例。然后，使用 mount 方法将 Vue 根实例挂载到指定的 DOM 元素上。在 Vue 3 中，app._container 可以通过这样的方式获取到 Vue 根实例的容器。
总之，Vue$root 是整个 Vue.js 应用的根实例，在 Vue.js 3 中使用起来更加方便、灵活。通过对 Vue$root 进行深入的了解和掌握，能够更好地掌控应用的整个生命周期、实现多样化的逻辑功能，整体提升开发效率与质量。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/151969.html
微信扫一扫 
支付宝扫一扫 