admin管理员组

文章数量:1633915

历史文章目录连接：

https://blog.csdn/yy763496668/article/details/113117040

此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

  1. 路由配置

  2. 第一个页面

正文：

第一、创建入口页面

在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在应用中使用后我们便可以在后续的页面中进行页面跳转。

第五、重新刷新浏览器

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

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

【关注、点赞，收藏】

关注公众号，您将第一时间收到文章更新

微信公众号：猿媛大本营

QQ群号：1056320746

本文标签： 路由ts

版权声明：本文标题：02_Vue3.0+TS之路由配置 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729177826a1188940.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。