返回顶部

[Vue.js] Vue router 路由嵌套children的基本使用实例讲解

[复制链接]
awagink 显示全部楼层 发表于 2021-3-9 15:46:12 |阅读模式 打印 上一主题 下一主题
试听
亲,登录后才能试听哦。
登录方法:
1.电脑版在右上角【登录】
2.手机版点右下角【登录】进入登录页面。
首先要在自己的路由配置文件里面创建对应的路由

例如我的路由主页是routerindex
两个子路由分别是routerboy和routergirl
  1. import Vue from 'vue'
  2. //1.引入路由
  3. import VueRouter from 'vue-router'

  4. import RouterIndex from '@/components/routerproject/routerindex'
  5. import routerboy from '@/components/routerproject/routerboy'
  6. import routergirl from '@/components/routerproject/routergirl'

  7. //2.安装路由
  8. Vue.use(VueRouter)

  9. //3.创建路由
  10. export default new VueRouter({
  11.         routes:[
  12.                 {
  13.                         path:"/routerproject/routerindex",
  14.                         name:"routerindex",
  15.                         component:RouterIndex,
  16.                         children:[
  17.                                 {
  18.                                         path:"routerboy",
  19.                                         name:"routerboy",
  20.                                         component:routerboy
  21.                                 },
  22.                                 {
  23.                                         path:"routergirl",
  24.                                         name:"routergirl",
  25.                                         component:routergirl
  26.                                 }
  27.                         ]
  28.                 }
  29.         ]
  30. })
复制代码


子路由需要在 VueRouter 的参数中使用 children 配置;
切记,在children 中,子路由的路径不要加 / ;

然后再看主路由页面routerindex的代码
1、首先要写入<router-view></router-view>添加路由视图
2、使用router-link并且写上子路由的位置路径,注意,这里就需要写上完整的路径
  1. <template>
  2.         <div>
  3.                 <h3>路由首页</h3>
  4.                 <router-link  to="/routerproject/routerindex/routerboy">跳转至儿子路由页面</router-link>
  5.                 <router-link  to="/routerproject/routerindex/routergirl">跳转至女儿路由页面</router-link>
  6.                 <router-view></router-view>
  7.         </div>
  8. </template>

  9. <script>
  10.         export default {
  11.                 name: 'routerindex',
  12.                 props: {
  13.                 },
  14.                 data(){
  15.                     return{
  16.                     }
  17.                 }
  18.         }
  19. </script>

  20. <style>
  21. </style>
复制代码




这是页面默认显示的样子,路径结尾是路由首页的路径

点击对应的跳转按钮,路径就会改变,页面上也会显示对应的路由页面显示的内容,如下图


如果想要直接显示【儿子路由】或者【女儿路由】,在路由配置文件中,添加redirect重定向即可
  1. children:[
  2.         {
  3.                 path:"",
  4.                 redirect:"routerboy"
  5.         },
  6.         {
  7.                 path:"routerboy",
  8.                 name:"routerboy",
  9.                 component:routerboy
  10.         },
  11.         {
  12.                 path:"routergirl",
  13.                 name:"routergirl",
  14.                 component:routergirl
  15.         }
  16. ]
复制代码





您需要登录后才可以回帖 登录 | 注册

本版积分规则

纳速健身网 成立于2006年8月,是目前国内优秀健身运动网站,拥有超过30万会员。形成了以健身伴奏音乐、养生知识、武术、太极拳、健身气功、运动健身等优质视频、图文教程及文章信息分享的一体化站点。为健身爱好者提供了一个健身运动信息资源交流的平台。
  • 纳速QQ群乙:151815303
  • 纳速QQ群丙:79104490
  • 微信交流群:微信好友搜索【nasuwang】加客服微信进群,备注【纳速】
  •                     或者扫描页面底部右侧二维码添加客服微信>>>
  • 微信公众号

  • 微信群客服交流

  • Copyright © 2006-2021, 纳速健身网. | | 辽ICP备13002388号-1 辽公安网备21050202000005号公安网备号 纳速武术-乙 QQ