项目导入 Vue Router 4 依赖包流程
下载 Vue Router 4 的依赖包:
npm install vue-router@4
新建 router.ts 文件,导入 createRouter 以及 createWebHashHistory 函数:
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path: "/",
name: "Home",
component: () => import("./components/Home.vue")
},
];
const router = createRouter({
history: createWebHashHistory("/"),
routes,
});
export default router;
createRouter()
必须传入一个对象,对象的接口是 RouterOptions,有 history 以及 routes 两个必要的字段。配置路由组件就是 routes 这一字段,基本就是路由组件的 URL 路径以及 component,name 不是必须的。
在 main.ts 文件中导入新建的路由文件,Vue use()
函数加载路由插件:
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
createApp(App)
.use(router)
.mount("body");
项目导入 Vue Router 4 依赖包流程的更多相关文章
- 关于eclipse 项目导入不了 maven依赖的解决办法
1.首先确定你的项目是maven 项目 ,如果不是:项目右键Configure -->Convert to maven project. 2.在SVN导出的Maven项目,或以前不是用Maven ...
- idea Maven项目找不到相关依赖包(红色波浪线)
前两天做项目的时候,把团队其他人的代码从git同步到自己电脑上,出现了冲突.发现是maven依赖出现了问题,之前的截图找不到了,我就简单描述一下.就是下图箭头所示位置出现了红色波浪线. 在网上找了很多 ...
- RN 项目导入WebStorm 组件没有依赖
你需要在项目根目录 $ npm instal 恭喜你完成 但是依然报错 npm config set registry="registry.npmjs.org" 重新配置了一 ...
- maven新建的项目,不自动引入依赖包
1.检查repository的目录是不是纯英文. 2.重新下载一次repository. 如果解决了问题,那么原因就是前面在加载repository的时候,因为断网导致了下载的包有误,无法被ecl ...
- Python项目生成所有依赖包的清单
最近写完的自动化脚本,分享给同事的时候发现依赖包很难解决(使用的不是virtualenv环境).想起来之前看开源接口平台项目的时候可以一键下载依赖包,于是就找到了第三方包pipreqs,可以自动帮助我 ...
- SpringMVC框架详细教程(四)_使用maven导入各个版本的Spring依赖包
使用maven导入Spring依赖包 上一节讲了如何向动态Web项目添加下载的Spring依赖包,作为补充下面列出了如何使用 maven 导入Spring的依赖包,可以选择需要的导入(推荐)或者全部导 ...
- Linux下离线安装python项目的依赖包
第一步新建一个site-packages文件夹,把python项目有需要的依赖包名称导出到site-packages下的requirements.txt中 $ pip3 freeze > req ...
- 如何正确在IDEA 里maven构建的项目中引入lib的jar包(图文详解)
不多说,直接上干货! 问题详情 以下是我,maven构建出来的最新spark2.2.0-bin-hadoop2.6的项目. 有些依赖包,maven还是无法一次性满足,所以,得手动加入lib的jar包. ...
- 一行命令更新所有 npm 依赖包
npm 包的更新速度很快,为了将项目或者全局依赖更新到最新版本.传统的做法是一个一个更新,比如更新 react 到最新版本,命令如下: # npm npm i --save react@latest ...
随机推荐
- Android Proguard混淆对抗之我见
关于何为Proguard,可以参考GuardSquare官网其优化业务及Wikipedia相关条目. Proguard:https://www.guardsquare.com/proguard Wik ...
- 使用Redis实现购物车功能
增加购物车商品 假设ID为1001的向购物车中存放了3个商品,产品ID分别为10021.10025.10079 hset cart:1001 10021 1 hset cart:1001 10025 ...
- 苹果宣布 2022 年 Apple 设计大奖得主
Apple 今日举办了年度 Apple 设计大奖颁奖仪式,表彰 12 款出类拔萃的 app 与游戏佳作.今年的获奖者包括来自全球各地的开发者.他们通过 app 呈现锐意创新.别出心裁的优美设计体验,以 ...
- 【物联网天线选择攻略】2.4GHz 频段增益天线模块设备选择
天线模块设备(antenna)是一种能量变换器,它把传输线上传播的导行波,变换成在无界媒介中传播的电磁波,或者进行相反的变换.对于设计一个应用于射频系统中的小功率.短距离的2.4GHz无线收发设备, ...
- PowerShell 定时刷新查看文件内容
get-content .\1.txt -ReadCount 0 -Tail 5 -Wait
- 使用http://start.spring.io/构建maven微服务项目的几个坑及eclipse构建spring boot微服务项目
一,使用http://start.spring.io/构建maven微服务项目 本来嘛,直接构建的项目导入时没有任何问题的导入就可以运行,可是最近构建好项目,然后导入,种种报错 1.导入之后POM报错 ...
- 12.web基础与HTTP协议
web基础与HTTP协议 目录 web基础与HTTP协议 web基础 域名概述 HTML概述 HTML基本标签 HTML语法规则 HTML文件结构 头标签中常用标签 内容标签中常用标签 静态网页与动态 ...
- 敲了几万行源码后,我给Mybatis画了张“全地图”
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.说说:"产"后感受 有人跟我说,手写Spring难,手写Mybatis ...
- 02 RESTFul接口和HTTP的幂等性分析
RESTFul接口和HTTP的幂等性分析 REST全称是Representational State Transfer,中文为表述性状态转移,REST指的是一组架构约束条件和原则 RESTful表述的 ...
- Vue-简单安装和运行
安装Vue CLI 安装nodejs 下载: https://nodejs.org/en/download/ 安装Vue CLI 文档: https://cli.vuejs.org/guide/ins ...