zoukankan      html  css  js  c++  java
  • Vue-嵌套路由

      一个被渲染组件同样可以包含自己的嵌套 <router-view>。同样要有vue-router的三个要素:路由map 、路由视图、路由导航。
      举个在"/apple" 下再嵌套路由的例子。
    要素一:路由map
      子路由需要在 VRouter 的参数中使用 children 配置:

    let router=new VRouter({
        mode:'history',
        routes:[
            {
                path:'/apple/:color',
                component:Apple,
                name: 'applename',
                children:[
                    {
                        path:'red-apple',
                        component:RedApple
                    },
                    {
                        path:'green-apple',
                        component:GreenApple
                    }
                ]
            },
            {
                path:'/banana',
                name: 'banananame',
                component:Banana
            }
        ]
    });


    要素二:路由视图
      在上级路由匹配组件里添加路由视图,本例中在 Apple 组件的模板添加 <router-view>

    <template>
        <div>
                <p>apple </p>
                <router-view></router-view>
        </div>
    </template>

    要素三:路由导航
      与顶级路由相似,可以使用<router-link> 创建 a 标签来定义导航链接,也可以使用 router.push ()方法

    <router-link :to="{path: '/apple/red-apple' }"> to red apple</router-link>
    router.push({path:'/apple/red-apple'})

      要注意,以 / 开头的嵌套路径会被当作根路径。
      更详细的关于 <router-link :to="...">和 router.push(...)的知识总结在 Vue-详解设置路由导航的两种方法:<router-link :to="..."> 和router.push(...)

  • 相关阅读:
    vuex状态管理
    vue3.0创建一个项目
    Django + Vue
    Django部署
    django简单使用
    Django模型
    Centos7编译openjdk8源码
    深入了解final
    深入了解java值传递
    java自带的Logger日志系统
  • 原文地址:https://www.cnblogs.com/superlizhao/p/8534865.html
Copyright © 2011-2022 走看看