add screenshot

src/components/rightPanel/index.vue

 <template>
     <div class="comp-rightpanel">
-        rightpanel
+        <router-view name="panel"></router-view>
     </div>
 </template>
 

src/components/rightPanel/screenshotPanel.vue

+<template>
+    <div>
+        screenshotPanel
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style></style>

src/components/sideNav/index.vue

@@ -4,6 +4,7 @@
         <router-link to="/about">About</router-link>
         <router-link to="/bao1">bao1</router-link>
         <router-link to="/bao2">bao2</router-link>
+        <router-link to="/screenshot">screenshot</router-link>
     </div>
 </template>
 

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Bao3 from '../views/bao3.vue'
+import Screenshot from '../views/screenshot.vue'
+import screenshotPanel from '../components/rightPanel/screenshotPanel.vue'
 
 Vue.use(VueRouter)
 
@@ -27,6 +29,13 @@ const routes = [
         path: '/bao2',
         name: 'Bao2',
         component: () => import(/* webpackChunkName: "bao2" */ '../views/bao2.vue')
+    },
+    {
+        path: '/screenshot',
+        components: {
+            default: Screenshot,
+            panel: screenshotPanel
+        }
     }
 ]
 

src/views/screenshot.vue

+<template>
+    <div class="screenshot">screenshot view</div>
+</template>
+
+<script>
+export default {
+    name: 'Screenshot',
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style lang="scss" scoped>
+.screenshot {
+    width: 100%;
+    height: 100%;
+    margin: 30px;
+}
+</style>