在vue3+ts的项目中,如何安装路由vue-router
安装路由
如果已经安装过的了,可以跳过这一步骤。版本如果较低,可以再重新安装一下。
npm install vue-router@4
声明路由文件src/router/index.ts
和vue2的写法没有太大差别。
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
和vue2的写法没有太大差别。
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
和vue2的写法没有太大差别。需要注意的是,vue3之后template可以多个模块。
<template>
<router-link class="a_link" to="/">home</router-link>
<router-link to="/trans">transValue</router-link>
<router-view></router-view>
</template>
效果:
这是a1页面在打开链接后的效果展示