9.创建项目-配置路由文件夹

最新推荐文章于 2024-06-02 17:36:11 发布
最新推荐文章于 2024-06-02 17:36:11 发布
阅读量265 收藏
点赞数
分类专栏： NodeJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingleiming/article/details/106833454
版权
  1. 为了访问各个页面，需要配置路由文件。新建路由文件夹，并创建index.js
    在这里插入图片描述
  2. 在index.js文件中编写路由文件，并使用export进行输出
    在这里插入图片描述
  3. 在src的app.js中引入routers下的index.js文件
    在这里插入图片描述
  4. 删除默认的匹配路径
    在这里插入图片描述
  5. 挂在路由
    在这里插入图片描述
  6. 运行npm run dev 此时的界面是无法访问主页面的
    在这里插入图片描述
  7. 那是因为我们没有配置，我们只配置了访问后台的back页面，此时输入localhost:3000/back/,就能访问到我们刚才配置的页面了
    在这里插入图片描述
蓝色清晨_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由配置与用法
m0_71753445的博客
08-14 850
路由
vue配置文件说明+路由vue-router使用
caigoutu的博客
06-12 2766
vue配置文件说明+路由
路由的安装与配置
最新发布
ghccgdykdy的博客
06-02 477
路由的安装与配置
四、vue中路由router配置详解
qq_23135259的博客
02-01 1万+
vue路由router
linux下的网络配置、配置文件、路由配置
静笃塾
01-08 9524
  我写每一篇文章，不是因为我很懂，而是因为我不懂，在学的时候做笔记，并共享。如有错误，望请赐教！ 基本概念 网关：可以称为网间连接器，用于不同网络之间的互联，可以是局域网，亦可为广域网；可以称为协议转换器，用于不同协议、数据格式、语言乃至体系结构的翻译转换。其实际上是一个网络通向另一个网络的IP地址。比如192.168.2.0/24网段，网关为192.168.3.1；192.168.2.0...
Node.js-node.jsexpress项目模板
08-10
2. **app.js** 或 **index.js**：这是项目的入口文件，通常包含了 Express 应用的初始化代码，如创建应用实例、设置中间件、定义路由等。 3. **routes** 文件夹：存放应用的路由逻辑，每个文件对应一个或多个特定的...
Vue全家桶+Vant 搭建大型单页面电商项目.http:--ddbuy.7-orange.cn.zip
10-30
**项目结构分析**：在`ddBuy-master`这个文件夹中，我们可以期待看到一个标准的Vue项目结构，包括`src`目录（包含源代码）、`public`目录（存放静态资源）、`node_modules`（依赖库）、`package.json`（项目配置和...
vue3新建项目，配置路由vue-router，引入element-plus
01-08
Vue3 是 Vue.js 的最新版本，它带来了许多性能优化和新特性，比如Composition API、Suspense、Teleport等。在创建Vue3项目时，我们...通过这个项目，你可以学习到如何配置Vue3项目、设置路由以及引入和使用UI组件库。
Node.js-通过构建项目来学习代码
08-10
Node.js可以通过设置路由或使用`express.static`中间件提供这些文件。 8. **模板引擎** 如果项目使用了模板引擎（如EJS、Pug），你需要了解如何在服务器端动态生成HTML，并将其发送到客户端。 9. **错误处理** ...
Node.js-nodejs实现的小项目
08-10
在这个小项目中，HTTP工具可能包括设置路由、处理GET和POST请求、返回JSON数据等内容。 【项目结构】 movie-center-master这个文件夹名可能代表了项目的主分支或源代码仓库。项目结构通常包括以下几个部分： 1. `...
Vue Router-配置路由文件
AndrewNeo
07-01 5280
Vue Router NPM安装： npm install vue-router 在一个工程化的项目中，我们通常在src文件下单独创建一个router文件夹，来保存各类路由的相关配置。如在router文件夹下，创建一个index.js文件，管理项目的各类路由配置。 import Vue from "vue" import Router from "vue-router" Vue.use(Router); //引入一级路由 import DashBoard from "./../views/dashboar
【自己的整理】node.js创建静态路由以及Router创建路由
角角兔的博客
10-29 4809
node.js路由的设置 静态路由 首先作为基础的创建一个静态路由，是在express中最简单的路由创建方法，这样就可以访问静态路由下的任何一个存在的文件。先要创建一个js文件，文件命名随便，比如我就把它叫做static.js，然后我们需要查看路由是否真正有效，所有我先在static.js文件的所在目录建立一个名为public的文件。然后在下面新建一个test.txt的文件，并在文件中写入一点东西。
7.创建项目-配置根路由文件
AndrewNeo
06-18 261
在src文件中创建路由配置文件config.js，实现路由跳转 在config.js中配置资源的全路径，引入join方法，并输出viewsPath publicPath 在src中的app.js中引入 config.js App.js中配置公共资源访问路径 打印根路径 在浏览器中输入localshot:3000，git bush中输出根路径 ...
在路由上进行ftp文件操作
yangnianlong的博客
04-07 2994
在路由上进行ftp文件操作 原理概述 ftp server能够提供远程用户端访问和操作的功能，用户可以通过主机或其他设备上的ftp用户端程序登录到服务器，进行文件的上传，下载等操作 拓扑 ip配置 操作 1、配置ip后测试连通性 2、配置路由器为FTP client 首先在本地创建一个文件夹，ftp-huawei作为服务器的文件夹，再改文件夹下创建子文件夹config,并创建测试换件test.txt 创建完成后，设置ftp服务器的文件夹为刚才的主文件夹目录 设置完成后，启动FTPserver，在R
Laravel新建路由文件
a898712940的博客
07-11 1133
直接新建文件 laravel的路由文件在根目录下面的routes文件夹下 默认的为web.php 以及api.php 比如我们要建立一个admin.php文件 首先我们要在app/Providers/RouteServiceProvider 服务提供者中注册该路由文件 添加mapAdminRoutes方法并且修改map方法，具体如下所示： public function map() { $this->mapApiRoutes(); $this->mapWebRoutes(
使用vue-router在项目中的路由目录和文件管理和一些注意事项（较完美的方案）
热门推荐
Army-海军的博客
04-11 2万+
直接看目录结构 这里的文件名建议都是单个单词命名。 看index.js文件 import Vue from 'vue' import Router from 'vue-router' import home from './home' import items from './items'; import user from './user'; import order from '....
项目的路由配置
zhou_ya_nan的博客
05-08 422
项目的路由配置（login登录页） 首先在views文件下面新建页面，命名为login.vue,随意输入进行一个测试页面，然后点击router文件夹，对index.js进行配置。 import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../views/login.vue' Vue.use(VueRouter) //这里就是配置的登录页面进行操作 const routes = [ { path: '
vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇
12-08
在src文件夹下创建router文件夹，并在其中创建index.ts文件，用于配置路由。在该文件中，我们需要定义路由的各个页面组件，并根据需要配置路由的子路由和路由守卫。例如： ```typescript import { createRouter, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值