vue的路由嵌套

本文详细介绍了如何在Vue项目中利用Router的children属性配置子路由,实现登录后跳转至action组件并展示导航栏和默认内容。通过具体代码示例,展示了如何设置path和component属性以实现嵌套路由。
1.需要在 Router 的参数中使用 children 配置:

PS:登录成功后跳转到action组件,action组件嵌套了多个子组件,渲染左边的导航栏(fixed)和默认渲染index的内容。相当于只有登录和action两个页面
{
path: ‘/action’, component: action, name: ‘action’,
children: [
{ path: ‘/’, component: index, name: ‘index’ },
{ path: ‘index’, component: index, name: ‘index’}
]
}
在这里插入图片描述

2.登录成功后的效果图如下

在这里插入图片描述

3.路由跳转都是在action/后面

在这里插入图片描述

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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值