使用VUE3和VITE写一个动态路由添加和component的示例
时间: 2024-03-20 10:42:41 浏览: 16
好的,下面是一个简单的示例:
```javascript
// App.vue
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/dynamic">Dynamic Route</router-link>
<router-view></router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
});
</script>
```
```javascript
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
```javascript
// views/Dynamic.vue
<template>
<div>
<h1>Dynamic Route Component</h1>
<ul>
<li v-for="component in components" :key="component.name">
<router-link :to="component.path">{{ component.name }}</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Dynamic',
data() {
return {
components: [
{
name: 'Dynamic Component 1',
path: '/dynamic/component1',
component: () => import('@/views/DynamicComponent1.vue'),
},
{
name: 'Dynamic Component 2',
path: '/dynamic/component2',
component: () => import('@/views/DynamicComponent2.vue'),
},
],
};
},
});
</script>
```
```javascript
// views/DynamicComponent1.vue
<template>
<div>
<h1>Dynamic Component 1</h1>
</div>
</template>
```
```javascript
// views/DynamicComponent2.vue
<template>
<div>
<h1>Dynamic Component 2</h1>
</div>
</template>
```
在这个示例中,我们创建了一个动态路由,可以添加和删除新的组件。在 `Dynamic.vue` 组件中,我们使用 `v-for` 渲染了一个包含动态组件的列表,并使用 `router-link` 组件将其链接到对应的路由路径。
当我们点击链接时,路由器将根据路径加载相应的组件并在 `router-view` 中呈现。