router-view如何包裹
时间: 2024-03-05 10:45:57 浏览: 26
在Vue.js中,`router-view`是用于渲染匹配到的路由组件的容器。它是Vue Router提供的一个组件,用于在应用程序中显示不同的页面内容。
要使用`router-view`,首先需要在Vue组件中引入Vue Router,并配置路由表。然后,在需要显示路由组件的地方,使用`<router-view></router-view>`标签进行包裹。
下面是一个简单的示例,展示了如何使用`router-view`包裹路由组件:
1. 首先,在Vue组件中引入Vue Router并配置路由表:
```javascript
import Vue from 'vue';import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
];
const router = new VueRouter({
routes
});
```
2. 在需要显示路由组件的地方,使用`<router-view></router-view>`标签进行包裹:
```html
<template>
<div>
<h1>My App</h1>
<router-view></router-view>
</div>
</template>
```
在上述示例中,`<router-view></router-view>`标签将会根据当前路由的路径,动态地渲染匹配到的路由组件。