vue3+ts项目安装路由

安装路由

npm install vue-router@4

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

import {
 createRouter, createWebHashHistory, RouteRecordRaw }
     from "vue-router";
    
const routes:ArrayRouteRecordRaw>
=[
  {
    
    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

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

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

效果：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！