vue3+ts项目安装路由

安装路由

代码语言：javascript复制

npm install vue-router@4

声明路由文件src/router/index.ts

代码语言：javascript复制

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw>=[
  {
    path:'/',
    name:'Home',
    component:()=>import('../components/HelloWorld.vue') 
  },
  {
    path:'/a1',
    name:'a1',
    component:()=>import('../components/a1.vue') 
  },
]
const router=createRouter({
  history:createWebHashHistory(),
  routes
})

export default router

修改main.ts

代码语言：javascript复制

import { createApp } from "vue";
import App from "./App.vue";
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


createApp(App).use(router).use(ElementPlus).mount("#app");

修改App.vue

代码语言：javascript复制

<template>
  <router-link class="a_link" to="/">home</router-link>
  <router-link to="/trans">transValue</router-link>
  <router-view></router-view>
</template>

效果：

vue.js vue3

0 人点赞