路由route配置

38kcok9w2vHanx_

已于 2024-03-22 09:05:18 修改

阅读量220

点赞数 1

文章标签：前端 javascript html

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

本文链接：https://blog.csdn.net/Hanx_/article/details/136901240

版权

首页 /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>