vue通过路由实现页面切换

最新推荐文章于 2024-08-02 11:00:31 发布

五花马与尔同销万古愁

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量298

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ZSXHZXY/article/details/138193912

版权

web页面如下所示，实现点击左侧导航栏跳转到相应的页面请添加图片描述
页面跳转如下

通过路由进行配置：
1.首先在router.js中配置路由，如下，其中dataPlot.vue和faultTable.vue对应上述的两组页面。

import Vue from 'vue'
import VueRouter from "vue-router"

import HomePage from "./components/homePage.vue"
import DataPlot from "./components/dataPlot.vue"
import FaultTable from "./components/faultTable.vue"
import FaultAnalysis from './components/faultAnalysis.vue'
import UserManage from './components/userManage.vue'
import DeviceManage from './components/deviceManage.vue'

Vue.use(VueRouter)
//如果需要嵌套还需要配置children可参考别的文章，这里功能比较简单
const router = new VueRouter({
    mode:"history",
    routes: [
        {
            path:"/",
            component:HomePage,
        },
        {
            path:"/dataplot",
            component:DataPlot,
        },
        {
            path:"/faulttable",
            component:FaultTable,
        },
        {
            path:"/faultanalysis",
            component:FaultAnalysis,
        },
        {
            path:"/devicemanage",
            component:DeviceManage,
        },
        {
            path:"/usermanage",
            component:UserManage,
        },
    ]
});

export default router;

2.编写dataPlot.vue和faultTable.vue中的功能代码，我的dataPlot.vue主要是从后端抓数据然后可视化呈现，并且保证页面刷新跳转后数据不丢失，faultTable.vue主要是上传excel文档，并且呈现在对应的表格中，查询的功能还没有实现，希望有大佬指导一下。
3.在APP.vue中配置路由链接，这里的link-to对应上述配置路由时的路径请添加图片描述
4.在需要页面切换的部分插入router-view

基本步骤就如上述所说，本人相开发一下电梯振动分析系统，目前还在学习web开发相关的知识，后端用的是django，前端vue，学的比较粗浅，该系统需要考虑的东西还有很多，以此来记录。