vueRouter的嵌套使用

 临时笔记；如图示，红色框中的内容是可以通过左边按钮实现页面跳转的，但是整个页面的框架逻辑是不变的。在html中，这部分代码一般情况下是使用iframe实现，然而vue中好像不太支持这种方式。于是，我打算使用嵌套路由完成这部分功能。

 路由的配置比较麻烦。

根目录下创建或/src/router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'
import index from '../views/index.vue'

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
        name:'index',
        path:'/',
        component:index
    },
    {
        name:'home',
        path:'/home',
        component:()=>import('../views/home.vue')
    },
    {
        name:'dataAnalysis',
        path:'/dataAnalysis',
        component:()=>import('../views/dataAnalysis.vue')
    }
]
})

export default router

Router3.0和Router4.0的写法有些许的不同之处，需要注意。

同时，根目录下的main.js中要调用router/index.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router/index.js'



const pinia = createPinia();



const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')

pinia的调用可以忽视，重点是 router

配置完以后就可以调用方法了。

需要调用大框架页面的地方引用<router-view>，如果需要页面跳转就需要<router-link>

  <div class="content-main" id="content-main">
                <router-view></router-view>
  </div>

//router-view的大框架

 <router-link to="/home" class="menuItem" > <i class="fa fa-home"></i>
                            <span class="nav-label">首页</span>
 </router-link>

//router-link实现大框架的页面跳转，而不涉及外部的固定框架