首页 > 其他分享 >vue3+ts初学之安装路由(router)

vue3+ts初学之安装路由(router)

时间:2023-03-21 11:00:10浏览次数:49  
标签:vue vue3 ts import router 安装 路由

一、安装路由

       1.安装vue-router

        vue3需要安装4.0以上版本

        vue2最好安装4.0以下版本

        安装命令:

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

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

 

 

 

二、配置router文件

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

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
// 1. 配置路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/", // 默认路由 home页面
    component: () => import("../components/login.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>

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

标签:vue,vue3,ts,import,router,安装,路由
From: https://www.cnblogs.com/fkcqwq/p/17239205.html

相关文章

  • vue3+ts初学之创建一个vue3项目
    (1)使用vue-cli创建:##安装或者升级npminstall-g@vue/cli##保证vuecli版本在4.5.0以上vue--version##创建项目vuecreatemy-project然后的步骤:Pl......
  • Dubbo——路由(Router)规则原理
    摘要Router的主要功能就是根据用户配置的路由规则以及请求携带的信息,过滤出符合条件的Invoker集合,供后续负载均衡逻辑使用。本博文将详细的讲解dubbo的路由相关原理。一......
  • SpringBoot——包扫描@ComponentScan源码分析
    摘要博文参考(1)选择SpringCloud作为微服务架构的原因(2)SpringBoot和SpirngCloud,请你谈谈对他们的理解(3)什么是服务熔断?什么是服务降级?(4)微服务的优缺点分别是什么?(5)你所知道......
  • 【vue3+ts+elementplus】 大文件分片上传,断点续传,秒传 示例
    大文件分片上传,断点续传,秒传示例一文网尽关于大文件(分片)上传你需要知道的所有前置知识点1.html代码<template> <divclass="cardcontent-box"> <el-uploadref="up......
  • #yyds干货盘点#Vue3中的expose函数
    发现expose函数今天在看setupscript语法糖的时候发现有说到context上的​​expose​​​函数,然后就查了一下这个函数,发现是在setRef中被使用到,源码中在对ref的value赋值时......
  • [DS记录] 线段树 Beats
    0.前言所谓线段树Beats,就是吉老师打出来的线段树。1.基本操作P6242线段树3区间加区间取min区间最大值区间和区间历史最大值首先考虑134咋做。就......
  • 可恶的struts2插件Validation.
    在学习validation的时候,碰到一个很见鬼的问题。我在写XXX-XXX-validation.xml的时候,为了写注释,让自己明白一点.....暂停....喝酒....第二天,酒醒了......
  • 在Struts2获得WebApplicationContext的方法
    1.Action实现implementsServletRequestAware,并实现setServletRequest()方法。publicvoidsetServletRequest(HttpServletRequestrequest){......
  • 关于struts2在IBM的JDK下运行的问题
    异常对应的jar包----------------------org.apache.velocity.tools.view.ToolboxManager-->velocity-tools-view-1.4.jarorg.apache.velocity.ap......
  • The Art of ChatGPT Prompting: A Guide to Crafting Clear and Effective Prompts
    AboutWhenChatGPTfirstlaunchedlastmonth,Iwasimmediatelycaptivatedbyitscapabilities.Iexperimentedwiththetoolinavarietyofwaysandwascons......