zoukankan      html  css  js  c++  java
  • vue-router多级路由

    多级路由的页面配置需要使用children属性

    两层嵌套:

    import Vue from "vue";
    import Router from 'vue-router'
    
    Vue.use(Router);
    
    const constantRouterMap = [
        // 重定向
        {
            path: '/',
            redirect: '/index',
        },
        {
            path: '/index',
            component:() => import('../src/components/index/index.vue'), 
            children: [{
                path: '/children',   //这里的路径加了/
                name:'children',
                component:() => import('../src/components/index/children/index.vue'),
                props: true,
            }]
        },
        {
            path: '/generator',
            name: 'gengrator',
            component:() => import('../src/components/generator/generator.vue'),
            redirect:'login',
            children:[{
                path:'/login',
                name:'login',
                component:()=>import('../src/components/generator/login/login.vue')
            }]
        }
    
    ]
    const router = new Router({
        routes: constantRouterMap,
        mode: 'history'
    });
    export default router

     然后在index.js页面中调用

    <router-link to="children">切换咯</router-link>  //注意这里的children 没有加/
    <router-view></router-view>

    设置默认路由

    如果需要将children/index.vue设置成为默认的子页面则在router.js中使用redirect属性

    {
            path: '/index',
            component:() => import('../src/components/index/index.vue'), 
            redirect:'children', //关键代码
            children: [{
                path: '/children',
                name:'children',
                component:() => import('../src/components/index/children/index.vue'),
                props: true,
            }]
        },

    多级页面也使用如上方法调用。

    跳转方式有两种:

    一个是直接在根路径下跳转,上面介绍的方法就是直接在根路径下跳转

    一个则是父组件的路径下。

    {
            path: '/index',
            component:() => import('../src/components/index/index.vue'), 
            children: [{
                path: 'children',   //注意这里的path没有加/
                name:'children',
                component:() => import('../src/components/index/children/index.vue'),
                props: true,
            }]
        },
    <router-link to="/index/children">切换咯</router-link>  //在父组件的路径下跳转
    <router-view></router-view>
  • 相关阅读:
    为什么 ObjectiveC 很难
    PHP开发Windows桌面应用程序实例
    windows下借助InstantRails环境搭建redmine
    php,python,ruby,perl的优缺点?
    Ruby在windows上的eclipse开发环境搭建
    Python的web框架很多,比如Django,webpy等,但是哪一种综合实力最强呢?
    使用JRockit作为Eclipse的Java VM
    Fat Jar Eclipse PlugIn Tutorial
    ECLIPSE插件集合
    Java反编译利器Jad, Jode, Java Decompiler等及其IDE插件
  • 原文地址:https://www.cnblogs.com/peilin-liang/p/12015482.html
Copyright © 2011-2022 走看看