Vue一个页面多个路由,每个路由下面又有子路由,请问Router该怎么写?

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Menu from '@/components/menu'
Vue.use(Router)

const routes = [
    {
        path: '/home',
        name: 'home',
        components: {
            default:Home,
            menu:Menu
        }
    }
];
const router = new Router({
    mode:"history",
    routes
});

export default router

App.vue

<template>
            <div id="app">
             <router-view name="menu" ></router-view>
             <router-view />
                <button @click="clickFn1">按钮1</button>

                <button @click="clickFn2">按钮2</button>
            </div>
</template>

如上所示,假如我点击 按钮1,想让name="menu" 这个路由改变,但是
另一个不变,该怎么操作?
希望的结果是 Url 路径变成 xxx.com/home/list , 就是在home路径下再加
一个children ,单路由的话是这么写

{
        path: '/home',
        name: 'home',
        component: Home,
        children:[
                {
                        path:"list",
                        component:xxx
                }
        ]
    }

但是多路由怎么写,还请大神指点!

4个回答

chidren 下面的
如果你希望的结果是 Url 路径变成 xxx.com/home/list
那么path:/home/list

不要理所当然的子路由会带上父路由的路径,还得是完整的访问url

嵌套路由。
例如App里面

在Home里面

Home嵌套其他子组件即可。

自己也在这个问题上纠结了一会,最后解决了,虽然过去有点久了,还是回答下,为后面的朋友指个路

router-view:

解析:注意router-view中的name属性,这个就是后面用来识别路由出口的

<div class="grid-content bg-purple-light">
    <router-view name="table"></router-view>
    <router-view name="form"></router-view>
</div>

路由:

解析:使用components可以让一个映射为多个出口输出

import Table from './views/Table.vue';
import Form from './views/Form.vue';

Vue.use(VueRouter);

export default new VueRouter({
    routes: [{
        path: '/table',
        components: {
            //这里的属性名就是和上面router-view中配置的name相对应的,为各个router-view映射相应的路由组件
            table: Table,
            form: Form
        }
    }, {
        path: '/form',
        components: {
            form: Form
        }
    }]
});

我想问一下,如上楼上的
import Table from './views/Table.vue';
import Form from './views/Form.vue';

Vue.use(VueRouter);

export default new VueRouter({
routes: [{
path: '/table',
components: {
//这里的属性名就是和上面router-view中配置的name相对应的,为各个router-view映射相应的路由组件
table: Table, 如果我这里还有子路由呢?》?又该如何去写呀?
form: Form 如果我这里还有子路由呢?》?又该如何去写呀?
}
}, {
path: '/form',
components: {
form: Form 如果我这里还有子路由呢?》?又该如何去写呀?
}
}]
});

下面这个图就是我想要的结果 了, 如果你不了解的话可以加我微信的,156456538
我就是想要这样的结果 ,但是想尽了办法也没有去实现的了,
考虑过现在网上流行那个多标签的方法,但是呢,没用。
他们始终也是一个窗口显示 ,没有做到多窗口。即就是他们同一时间只能显示 一个标签。图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问