vue-router怎么setup全局注册组件
时间: 2023-07-01 14:04:22 浏览: 111
vue3.x+vite+ts+vue-router@4.x 路由使用demo
可以在Vue的根实例中通过`Vue.component()`方法全局注册组件。而在Vue-Router中,我们可以在路由配置文件中使用`components`属性来定义全局组件。
以下是一个示例:
```js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
Vue.use(VueRouter)
Vue.component('my-component', {
template: '<div>This is my global component!</div>'
})
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在上面的示例中,我们使用`Vue.component()`方法全局注册了一个名为`my-component`的组件。然后,在路由配置中,我们将`Home`组件作为一个路由组件使用,并且可以在`Home`组件中直接使用`my-component`组件。
如果需要在多个路由组件中使用同一个组件,那么全局注册组件可以减少代码的重复,提高代码的复用性。
阅读全文