Vue路由嵌套适用于页面一部分变化、一部分不变的场景。使用时需注意两个要点：子
路由的`path`设置以及主组件结构中必须添加`<router-view></router-view>`标签 [^1]。
以下是使用
Vue - cli搭建项目并进行
路由嵌套的详细步骤和示例：
1. **改变端口号**：由于本地域名可能多人使用，为提高运行项目的效率，需要先改变端口号 [^2]。
2. **定义组件**：在项目的`src`文件下的`component`文件中定义好组件，并提供依赖 [^2]。
例如，创建`ParentComponent.
vue`、`ChildComponent1.
vue`和`ChildComponent2.
vue`：
```
vue
<!-- ParentComponent.
vue -->
<template>
<div>
<h1>父组件</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'ParentComponent'
}
</script>
<style scoped>
</style>
```
```
vue
<!-- ChildComponent1.
vue -->
<template>
<div>
<h2>子组件1</h2>
</div>
</template>
<script>
export default {
name: 'ChildComponent1'
}
</script>
<style scoped>
</style>
```
```
vue
<!-- ChildComponent2.
vue -->
<template>
<div>
<h2>子组件2</h2>
</div>
</template>
<script>
export default {
name: 'ChildComponent2'
}
</script>
<style scoped>
</style>
```
3. **配置
路由集合**：在`index.js`中将组件提供组件的
路由集合 [^2]。
```javascript
import
Vue from '
vue'
import
VueRouter from '
vue-router'
import ParentComponent from '../components/ParentComponent.
vue'
import ChildComponent1 from '../components/ChildComponent1.
vue'
import ChildComponent2 from '../components/ChildComponent2.
vue'
Vue.use(
VueRouter)
const routes = [
{
path: '/parent',
name: 'Parent',
component: ParentComponent,
children: [
{
path: 'child1',
name: 'Child1',
component: ChildComponent1
},
{
path: 'child2',
name: 'Child2',
component: ChildComponent2
}
]
}
]
const router = new
VueRouter({
routes
})
export default router
```
4. **定义跳转路径**：在`App.
vue`中定义组件的跳转路径（锚点和跳转链接） [^2]。
```
vue
<template>
<div id="app">
<router-link to="/parent/child1">跳转到子组件1</router-link>
<router-link to="/parent/child2">跳转到子组件2</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
```
5. **重新运行项目**：完成上述步骤后，重新运行项目 [^2]。
###
路由切换动画设置
还可以为
路由切换设置动画，使用`transition`标签包裹`router-view`，并定义`v-enter`、`v-leave-to`、`v-enter-active`、`v-leave-active`样式，通过`mode`属性设置动画切换的模式 [^3]。
```
vue
<template>
<div id="app">
<router-link to="/parent/child1">跳转到子组件1</router-link>
<router-link to="/parent/child2">跳转到子组件2</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s;
}
</style>
```
本文详细介绍了如何在Vue项目中利用Router的children属性配置子路由，实现登录后跳转至action组件并展示导航栏和默认内容。通过具体代码示例，展示了如何设置path和component属性以实现嵌套路由。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
