avatar
童琦杰
Jun 17, 2021Technology

Get Started With Vue3

创建项目

bash
vue create my-project-name

安装路由

安装组件

bash
npm install vue-router@4

配置路由规则、路由模式

main.ts
typescript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'

// 配置路由规则
const routes = [
    { path: '/', component: Home },
]
// 创建router,使用HTML5 history模式,并且基路径'base'
const router = createRouter({
    history: createWebHistory('base'),
    routes: routes
})
// 使用router
createApp(App).use(router).mount('#app')

设置路由视图

App.vue
typescript
<template>
  <!-- 路由视图 -->
  <router-view></router-view>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component'

export default class App extends Vue {}
</script>
© 2015-2022 tongqijie.com 版权所有沪ICP备17000682号