下载 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 依赖包流程的更多相关文章

  1. 关于eclipse 项目导入不了 maven依赖的解决办法

    1.首先确定你的项目是maven 项目 ,如果不是:项目右键Configure -->Convert to maven project. 2.在SVN导出的Maven项目,或以前不是用Maven ...

  2. idea Maven项目找不到相关依赖包(红色波浪线)

    前两天做项目的时候,把团队其他人的代码从git同步到自己电脑上,出现了冲突.发现是maven依赖出现了问题,之前的截图找不到了,我就简单描述一下.就是下图箭头所示位置出现了红色波浪线. 在网上找了很多 ...

  3. RN 项目导入WebStorm 组件没有依赖

    你需要在项目根目录   $ npm instal 恭喜你完成 但是依然报错 npm config set registry="registry.npmjs.org"  重新配置了一 ...

  4. maven新建的项目,不自动引入依赖包

    1.检查repository的目录是不是纯英文. 2.重新下载一次repository.   如果解决了问题,那么原因就是前面在加载repository的时候,因为断网导致了下载的包有误,无法被ecl ...

  5. Python项目生成所有依赖包的清单

    最近写完的自动化脚本,分享给同事的时候发现依赖包很难解决(使用的不是virtualenv环境).想起来之前看开源接口平台项目的时候可以一键下载依赖包,于是就找到了第三方包pipreqs,可以自动帮助我 ...

  6. SpringMVC框架详细教程(四)_使用maven导入各个版本的Spring依赖包

    使用maven导入Spring依赖包 上一节讲了如何向动态Web项目添加下载的Spring依赖包,作为补充下面列出了如何使用 maven 导入Spring的依赖包,可以选择需要的导入(推荐)或者全部导 ...

  7. Linux下离线安装python项目的依赖包

    第一步新建一个site-packages文件夹,把python项目有需要的依赖包名称导出到site-packages下的requirements.txt中 $ pip3 freeze > req ...

  8. 如何正确在IDEA 里maven构建的项目中引入lib的jar包(图文详解)

    不多说,直接上干货! 问题详情 以下是我,maven构建出来的最新spark2.2.0-bin-hadoop2.6的项目. 有些依赖包,maven还是无法一次性满足,所以,得手动加入lib的jar包. ...

  9. 一行命令更新所有 npm 依赖包

    npm 包的更新速度很快,为了将项目或者全局依赖更新到最新版本.传统的做法是一个一个更新,比如更新 react 到最新版本,命令如下: # npm npm i --save react@latest ...

随机推荐

  1. Android Proguard混淆对抗之我见

    关于何为Proguard,可以参考GuardSquare官网其优化业务及Wikipedia相关条目. Proguard:https://www.guardsquare.com/proguard Wik ...

  2. 使用Redis实现购物车功能

    增加购物车商品 假设ID为1001的向购物车中存放了3个商品,产品ID分别为10021.10025.10079 hset cart:1001 10021 1 hset cart:1001 10025 ...

  3. 苹果宣布 2022 年 Apple 设计大奖得主

    Apple 今日举办了年度 Apple 设计大奖颁奖仪式,表彰 12 款出类拔萃的 app 与游戏佳作.今年的获奖者包括来自全球各地的开发者.他们通过 app 呈现锐意创新.别出心裁的优美设计体验,以 ...

  4. 【物联网天线选择攻略】2.4GHz 频段增益天线模块设备选择

     天线模块设备(antenna)是一种能量变换器,它把传输线上传播的导行波,变换成在无界媒介中传播的电磁波,或者进行相反的变换.对于设计一个应用于射频系统中的小功率.短距离的2.4GHz无线收发设备, ...

  5. PowerShell 定时刷新查看文件内容

    get-content .\1.txt -ReadCount 0 -Tail 5 -Wait

  6. 使用http://start.spring.io/构建maven微服务项目的几个坑及eclipse构建spring boot微服务项目

    一,使用http://start.spring.io/构建maven微服务项目 本来嘛,直接构建的项目导入时没有任何问题的导入就可以运行,可是最近构建好项目,然后导入,种种报错 1.导入之后POM报错 ...

  7. 12.web基础与HTTP协议

    web基础与HTTP协议 目录 web基础与HTTP协议 web基础 域名概述 HTML概述 HTML基本标签 HTML语法规则 HTML文件结构 头标签中常用标签 内容标签中常用标签 静态网页与动态 ...

  8. 敲了几万行源码后,我给Mybatis画了张“全地图”

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.说说:"产"后感受 有人跟我说,手写Spring难,手写Mybatis ...

  9. 02 RESTFul接口和HTTP的幂等性分析

    RESTFul接口和HTTP的幂等性分析 REST全称是Representational State Transfer,中文为表述性状态转移,REST指的是一组架构约束条件和原则 RESTful表述的 ...

  10. Vue-简单安装和运行

    安装Vue CLI 安装nodejs 下载: https://nodejs.org/en/download/ 安装Vue CLI 文档: https://cli.vuejs.org/guide/ins ...