问题
vue router路由跳转了，但是页面没有变
<template>
<v-app id="inspire">
<!-- 侧边栏 -->
<v-navigation-drawer v-model="drawer" app>
<!-- -->
<v-list-item>
<v-list-item-content>
<v-list-item-title class="text-h6">
测试平台gaox
</v-list-item-title>
<v-list-item-subtitle>
练习平台
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list
dense
nav
>
<v-list-item
v-for="item in items"
:key="item.title"
link
:href="item.link"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<!-- 顶部难栏 -->
<v-app-bar app>
<v-app-bar-nav-icon @click="drawer = !drawer">
</v-app-bar-nav-icon>
<!-- 修改布局title展示内容 -->
<v-toolbar-title>测试平台</v-toolbar-title>
</v-app-bar>
<v-main>
<!-- 主界面 -->
<!-- 添加路由 -->
<router-view/>
</v-main>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
const drawer = ref(null)
</script>
<script>
export default {
data: () => ({ drawer: null,
items: [
{ title: '测试用例', icon: 'mdi-view-dashboard', link: '#/layout/testcase' },
{ title: '测试任务', icon: 'mdi-image', link: '#/layout/testtask' },
{ title: '测试报告', icon: 'mdi-help-box', link: '#/layout/testreport' },
],
right: null,
}),
}
</script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import LayOut from '../views/LayOut.vue'
import TestCase from '../views/TestCase.vue'
import TestTasK from '../views/TestReport.vue'
import TestReport from '../views/TestReport.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/layout'
},
{
path: '/layout',
name: 'layout',
component: LayOut,
children: [
{
path: 'testcase',
name: 'testcase',
component: TestCase
},
{
path: 'testtask',
name: 'testtask',
component: TestTasK
},
{
path: 'testreport',
name: 'testreport',
component: TestReport
},
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router