vue 路由

layout（导航页）

<template>


    <div>
        <div class="header-panel"><headerNav></headerNav></div>
        <div class="container">
            <div class="stable-nav"> <LeftNav></LeftNav></div>
            <div class="change-content">
                <router-view></router-view>//必须添加router-view用来存放除导航以外的内容
            </div>
        </div>
    </div>
</template>

<script>
    import headerNav from "@/components/common/headerNav"//顶部导航文件
    import LeftNav from "@/components/common/left-nav"//左侧菜单文件
    export default {
        name: "layout",
        components:{
            headerNav,
            LeftNav
        }
    }

</script>

<style scoped>

</style>

index.js(路由)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/components/common/layout'//引入封装的导航和左侧菜单


Vue.use(VueRouter)
export default new VueRouter({
    routes: [
     //系统进入加载的页面 path: '/'无需输入，path中的/表示根目录
       {
            path: '/',
            name: 'home',
            component: Layout,
            children: [{
                    path: '',
                    component: () =>
                        import ("@/components/Home")
                },

            ]

        },
     // 签到管理
        {
            path: '/',
            name: 'sign-in-management',
            component: Layout,//左侧导航
            children: [
                // 授权码列表
                {
                    path: '/authorization-code-list',//一级路由
                    name: 'authorization-code-list',
                    component: () =>
                        import ("@/components/sign-in-management/authorization-code-list"),
                    children: [{
                        path: 'generate-authorization-code',//此为子路由，path中名称前不能加/，否则无法访问
                        name: 'generate-authorization-code',
                        component: () =>
                            import ("@/components/sign-in-management/generate-authorization-code"),
                    }]

                },
                // 座位分配列表/上传现场座位图
                {
                    path: '/on-site-seats',
                    name: 'on-site-seats',
                    component: () =>
                        import ("@/components/sign-in-management/on-site-seats")
                },
                // 批量生成授权码
                {
                    path: '/generate-authorization-code',
                    name: 'generate-authorization-code',
                    component: () =>
                        import ("@/components/sign-in-management/generate-authorization-code")
                },
                
            ]
        },
    ]
})

页面访问

vue 
<el-button @click="goGenerateAuthorizationCode">
                                   批量生成授权码
                                </el-button>
//一级路由的访问同理
methods:{
goGenerateAuthorizationCode(){
				this.$router.push({path:"/generate-authorization-code"})
			}
}