02_Vue3.0+TS之路由配置

概述:

正文：

第一、创建入口页面

在src中创建views目录并添加Index.vue文件,具体代码如下

第二、引入vue-router

安装vue-router 插件

命令如下：npm install vue-router

第三、在src中创建router目录，目录中创建router.ts文件

创建路由，并且使用web的history。

源码如下：

import { createRouter,createWebHistory } from "vue-router";
import Index from '../views/Index.vue';
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/',
            component:Index,
        }
    ]
})
export default router;

第四、配置main.ts

源码如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
createApp(App).use(router).mount('#app')

将router在应用中使用后我们便可以在后续的页面中进行页面跳转。

第五、重新刷新浏览器

即可看到“入口页面”四个字

以上就是我们配置简单路由的过程了。