路由route配置

原创已于 2024-03-22 09:05:18 修改 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2024-03-21 11:28:29 首次发布

文章讨论了在Vue应用中，定义的子路由在src/router/routeli.js中未生效的问题，涉及`children`属性配置和如何导入子组件。作者寻求帮助并提供了相关组件代码示例。

首页 /routeli

page1 /routeli/page1

page2 /routeli/page2

src/router/routeli.js

写的children没生效，为啥啊？待研究

const routeli = [
    {
        path: '/routeli',
        component: () => import('@/pages/routeli/index.vue'),
        // 写的children没生效，为啥啊？待研究
        // children: [
        //     {
        //         path: 'page1',
        //         component: () => import('@/pages/routeli/page1.vue'),
        //     },
        //     {
        //         path: 'page2',
        //         component: () => import('@/pages/routeli/page2.vue'),
        //     }
        // ]
    },
    {
        path: '/routeli/page1',
        component: () => import('@/pages/routeli/page1.vue'),
    },
    {
        path: '/routeli/page2',
        component: () => import('@/pages/routeli/page2.vue'),
    }
]
export default routeli;

src/router/index.js

需要import引入

index.vue

<template>
    <div>
        index
        <button @click="topage1">page1</button>
        <button @click="topage2">page2</button>
    </div>
</template>

<script>
// import {方法名} from '@/api/xxx.js'
// import 组件 from '@/view/xxx.vue'
export default {
    data () {
        return {

        }
    },
    components:{
        // 组件
    },
    props: {

    },
    watch:{

    },
    created(){

    },
    mounted(){

    },
    methods: {
        topage1(){
            this.$router.push({
                path: '/routeli/page1'
            })
        },
        topage2(){
            this.$router.push({
                path: '/routeli/page2'
            })
        },
    }
};
</script>

<style scoped='scoped' lang='scss'>

</style>

page1.vue

<template>
    <div>
        page1
        <button @click="goback">返回</button>
    </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    components:{
        // 组件
    },
    props: {

    },
    watch:{

    },
    created(){

    },
    mounted(){

    },
    methods: {
        goback(){
            this.$router.go(-1)
        }
    }
};
</script>

<style scoped='scoped' lang='scss'>

</style>

page2.vue

<template>
    <div>
        page2
        <button @click="goback">返回</button>
    </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    components:{
        // 组件
    },
    props: {

    },
    watch:{

    },
    created(){

    },
    mounted(){

    },
    methods: {
        goback(){
            this.$router.go(-1)
        }
    }
};
</script>

<style scoped='scoped' lang='scss'>

</style>