vue3+ts:安装路由(router)

这篇具有很好参考价值的文章主要介绍了vue3+ts:安装路由(router)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、安装路由

       1.安装vue-router

        vue3需要安装4.0以上版本

        vue2最好安装4.0以下版本

        安装命令:

npm install vue-router@next --save // 安装最新版本router

// 如需按版本安装,需将命令行中 next 改成相应的版本。如下:
// npm install vue-router@4.0.13 --save

        安装完成后,在package.json中查看vue-router是否安装成功

vue3+ts:安装路由(router)

 文章来源地址https://www.toymoban.com/news/detail-459908.html

二、配置router文件

src目录下新建一个router文件夹,在router文件夹里新建一个index.ts文件,代码如下:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

// 1. 配置路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/", // 默认路由 home页面
    component: () => import("../views/home/index.vue"),
  },

];
// 2.返回一个 router 实列,为函数,配置 history 模式
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 3.导出路由   去 main.ts 注册 router.ts
export default router

三、在main.ts中引用router下的index.ts

main.ts中代码如下:

// import { createApp } from 'vue' // 安装unplugin-auto-import 可注释
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia' // 引入pinia
import router from "./router/index" // 引入router

const app = createApp(App)
app.use(createPinia())
    .use(router)
    .mount('#app')

 四、app.vue中添加路由组件router-view

<template>
  <router-view></router-view>
</template>

 此时:路由的默认跳转就可以了,项目启动之后,就会跳转到第二步骤配置的home页面。

 示例代码:vue3+ts:安装路由(router)

 页面示例:

vue3+ts:安装路由(router)

 

到了这里,关于vue3+ts:安装路由(router)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目

    最后是完整的vite.config.ts、main.ts配置 1、先用vite创建一个项目 2、安装element plus vite.config.ts配置组件按需导入,图标自动导入   main.ts配置 页面文件使用 3、安装axios main.ts 4、安装pinia /stores/index.ts /stores/counter.ts main.ts 页面使用 5、安装router4 /router/index main.ts   6、vite.config.ts常

    2023年04月25日
    浏览(55)
  • Vue3 Vite4 ElementPlus TS模板(含Vue-Router4+Pinia4)

    手动安装配置Vue3 ElementPlus模板比较繁琐,网上寻找一些模板不太符合自己预期,因此花点精力搭建一个符合自己需求的架子 采用最新的组件,版本如下: vite 4.3.9 vite-plugin-mock 2.9.8 vue 3.3.4 pinia 2.1.3 vue-router 4.2.2 element-plus 2.3.6 满足自己以下功能: Vite工具热启动速度快,修改后

    2024年02月08日
    浏览(54)
  • 详解Vite创建Vue3项目+vue-router+ts+vite+element-plus

    前言 在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”,但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。 Vite 和 Webpack 都是现代化的前端构建工

    2024年01月18日
    浏览(62)
  • Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程

    (1). yarn add vue-router (2) 创建 router/index.js 文件 (3) improt 引入 createRouter improt { createRouter  }  from \\\'vue-router (4) 调用 createRouter 并定义变量名  cosnt router = createRouter()  (5) export default 导出 router  export default router  (6) createRouter() 内添加对象 并定义 history    history: createMemoryHistory()

    2023年04月08日
    浏览(78)
  • 【vue3】13-前端路由-Vue-Router的详解: 从入门到掌握

    路由其实是网络工程中的一个术语: 在 架构一个网络 时,非常重要的两个设备就是 路由器和交换机 。 当然,目前在我们生活中 路由器 也是越来越被大家所熟知,因为我们生活中都会用到 路由器 : 事实上, 路由器 主要维护的是一个 映射表 ; 映射表 会决定数据的流向; 路由

    2024年02月09日
    浏览(50)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(71)
  • vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决

    作为项目经验稀少的vue开发者来说,在关键技术点上的经验不多,我希望通过我的思想和实践,把好的东西分享在这里,目的是进一步促进技术交流。项目即将完成,权限是最后的收尾工作,好的权限实现方案,可以让我们没有后顾之忧,也可以提升项目的运行速度。 在开发

    2023年04月08日
    浏览(57)
  • Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用

     html部分 js部分  html页面使用路由传来的参数  获取router跳转id 获取 路由跳转错误地址

    2024年02月11日
    浏览(45)
  • Vue3+Vue-Router+Element-Plus根据后端数据实现前端动态路由——权限管理模块

    提示:文章内容仔细看一些,或者直接粘贴复制,效果满满 提示:文章大概 1、项目:前后端分离 2、前端:基于Vite创建的Vue3项目 3、后端:没有,模拟的后端数据 4、关于路径“@”符号——vite.config.js 文件里修改 提示:以下是本篇文章正文内容,下面案例可供复制粘贴使用

    2024年02月02日
    浏览(64)
  • vite+ts出现红色波浪线;找不到模块“vue-router

    提示:找不到模块“vue-router”。你的意思是要将 \\\"moduleResolution\\\" 选项设置为 \\\"node\\\",还是要将别名添加到 \\\"paths\\\" 选项中?ts(2792) 解决方案一: 查看官方文档:https://www.tslang.cn/docs/handbook/migrating-from-javascript.html 获取声明文件 如果你开始做转换到TypeScript导入,你可能会遇到 Canno

    2024年02月08日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包