qt中用树形结构作项目索引怎么实现各项目页面跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了qt中用树形结构作项目索引怎么实现各项目页面跳转相关的知识，希望对你有一定的参考价值。
ui->treeWidget->setColumnCount(1); //设置列数ui->treeWidget->setHeaderLabel(tr("图像选择")); //设置头的标题QTreeWidgetItem *imageItem1 = new QTreeWidgetItem(ui->treeWidget,QStringList(QString("图像1")));imageItem1->setIcon(0,QIcon("xxx.png"));
QTreeWidgetItem *imageItem1_1 = new QTreeWidgetItem(imageItem1,QStringList(QString("Band1"))); //子节点1
imageItem1->addChild(imageItem1_1); //添加子节点
QTreeWidgetItem *imageItem2 = new QTreeWidgetItem(ui->treeWidget,QStringList(QString("图像2")));
QTreeWidgetItem *imageItem2_1 = new QTreeWidgetItem(imageItem2,QStringList(QString("Band1"))); //子节点1
QTreeWidgetItem *imageItem2_2 = new QTreeWidgetItem(imageItem2,QStringList(QString("Band2"))); //子节点2
imageItem2->addChild(imageItem2_1); //添加子节点
imageItem2->addChild(imageItem2_2);
ui->treeWidget->expandAll(); //结点全部展开 参考技术A qt是什么东西
Laravel 项目中用 vue-router 实现页面跳转
vue-router 作用
保留页面部分内容，实现页面跳转
准备工作
切换到项目根目录下，安装 vue-router
npm install vue-router
Laravel Framework 8.40.0
vue version: 2.6.12
vue-router version: 3.5.1
整体思路
laravel 路由文件 web.php -> view 中的页面 -> app.js -> component 中的 vue 文件
创建路由
在 routes/web.php 中添加一个路由，网址为 http://localhost:8000/testVueRoute，显示页面为 resources/view 中的 testVueRoute.blade.php
Route::get('/testVueRoute', function(){
return view('testVueRoute');
});
创建 html 页面
在 resources/view 中新建一个文件 testVueRoute.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
// 引入 css 文件
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
// id 为 app，要跟 app.js 中的 id 一致
<div id="app">
<h1>testVueRoute Page</h1>
// 使用 vue 中的 </router-view> 元素渲染页面
<router-view></router-view>
</div>
// 引入 app.js 文件
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
使用 vue-router
编辑 resources/js/app.js，app.js 为 laravel 项目中 vue 的入口文件
require('./bootstrap');
import Vue from 'vue'
// 引入 vue-router
// 必须用 import, 如果用 window.Vue = require('vue');会报错
import VueRouter from 'vue-router'
// 使用 vue-router
Vue.use(VueRouter)
const routes = [
// '/'为 testVueRoute.blade.php 的路径，即 'http://127.0.0.1:8000/testVueRoute'
// 调用 resources/js/component 中的文件
{ path: '/', component: require('./components/ExampleComponent.vue').default },
// url 为 http://127.0.0.1:8000/testVueRoute#/page
{ path: '/page', component: require('./components/Page.vue').default }
]
// 为上面的变量 routes 新建一个实例
// 变量名必须为 router, 否则报错 app.js:41520 [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
const router = new VueRouter({
routes
})
const app = new Vue({
// 使用新建的实例
router
}).$mount('#app')
// 同上
// const app = new Vue({
// el: '#app',
// router
// });
新建 vue 主页面
resources/js/component 中新建一个文件 ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Home Component</div>
<div class="card-body">
Welcome to Example Component <br/>
// 使用 vue 元素 <router-link> 点击跳转到 page
<router-link to="/page">Go to Page</router-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
新建 vue 跳转页面
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Page Component</div>
<div class="card-body">
// 使用 vue 元素 <router-link> 点击跳转到根目录 '/'
<router-link to="/">Go to Example Component</router-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
测试使用
编译刚刚写好的 vue 文件
npm run dev
// 或 npm run watch
打开 127.0.0.1:8000/testVueRoute
另
把 vue-router 放在单独的文件里见
Laravel项目中用 vue-router实现页面跳转之vue-router写在单独的文件中.
以上是关于qt中用树形结构作项目索引怎么实现各项目页面跳转的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 项目中用 vue-router 实现页面跳转
Laravel 项目中用 vue-router 实现页面跳转