关于vue跳转，以及如果写框架时候，保留左边和顶部

app.vue

<template>

  <RouterView></RouterView>

</template>

HomeView.vue

<template>

    <div>

        this is home

        <RouterView></RouterView>

    </div>

</template>

<script setup>

</script>

<style  scoped>

</style>

MySubItemView.vue

HelloWorld.vue

<script setup>

import { ref } from 'vue'

defineProps({

  msg: String

})

const count = ref(0)

</script>

<template>

  <h1>{{ msg }}</h1>

  <p>

    Recommended IDE setup:

    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>

    +

    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>

  </p>

  <p>

    <a href="https://vitejs.dev/guide/features.html" target="_blank">

      Vite Documentation

    </a>

    |

    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>

  </p>

  <button type="button" @click="count++">count is: {{ count }}</button>

  <p>

    Edit

    <code>components/HelloWorld.vue</code> to test hot module replacement.

  </p>

</template>

<style scoped>

a {

  color: #42b983;

}

</style>

router.js

import {createRouter,createWebHashHistory} from 'vue-router';

const routes =[

    {

        path:'/',

        name:"root",

        redirect:'/home'

    },

    {

        path:'/home',

        name:"home",

        redirect: '/home/item',//这个redirect必须是跳转子，才能保留框架

        // redirect: '/hello',如果是跳转到/hello,就不能保留  this is home

        component:()=>import("../components/HomeView.vue"),

        children:[

            {

                path:'item',

                name:'item',

                component:()=>import("../components/MySubItemView.vue"),

            }

           

        ]

         

    },

    {

        path:'/hello',

        name:"hello",

        component:()=>import("../components/HelloWorld.vue"),

       

    }

]

const router = createRouter({

    history:createWebHashHistory(),

    routes

})

 

export default router