前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3+ts项目安装路由

vue3+ts项目安装路由

原创
作者头像
肥晨
发布2023-04-23 10:06:58
2990
发布2023-04-23 10:06:58
举报
文章被收录于专栏:农民工前端

安装路由

代码语言: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>

效果:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装路由
  • 声明路由文件src/router/index.ts
  • 修改main.ts
  • 效果:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档