yinqing8899
以为是书生
采纳率0%
2018-12-24 22:06

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条回答

  • xuzhicheng2014 杰2014 3年前

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

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

    点赞 1 评论 复制链接分享
  • D578332749 imdongrui 2年前

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

    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
            }
        }]
    });
    
    点赞 评论 复制链接分享
  • weixin_39521850 QQ914237918 2年前

    我想问一下,如上楼上的
    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
    我就是想要这样的结果 ,但是想尽了办法也没有去实现的了,
    考虑过现在网上流行那个多标签的方法,但是呢,没用。
    他们始终也是一个窗口显示 ,没有做到多窗口。即就是他们同一时间只能显示 一个标签。图片说明

    点赞 评论 复制链接分享
  • chen_2016_web chen_2016_web 2年前

    嵌套路由。
    例如App里面

    在Home里面

    Home嵌套其他子组件即可。

    点赞 评论 复制链接分享

相关推荐