美文网首页
VVT项目第二步:配置路由

VVT项目第二步:配置路由

作者: 锋叔 | 来源:发表于2023-10-15 17:06 被阅读0次

配置全局路由

第一步:安装插件。

npm install vue-router@4
Vue Router 中文文档地址
(链接如果失效就自行搜索官网)

第二步:配置相关文件和项目引入。
  • 1、在src目录下创建一个新的文件夹,命名为router
  • 2、在router文件夹中,创建一个新的TS文件,命名为index.ts,并编写以下代码:
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../layout/home.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    // 添加其他路由
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;
  • 3、在src目录下创建一个新的文件夹,命名为layout
  • 4、在layout文件夹中,创建一个新的VUE文件,命名为home.vue,并编写以下代码:
<template>
    <h1>VVT-WEB</h1>
</template>

<script>
</script>

<style>
</style>
  • 5、在src目录下找到main.ts,引入router。
    main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')
  • 7、在src目录下找到App.vue,加上路由展示标签<router-view></router-view>
    App.vue
...
<template>
  <router-view></router-view>
</template>
...

如果顺利的话,你会得到一个这样的项目:

image.png

相关文章

网友评论

      本文标题:VVT项目第二步:配置路由

      本文链接:https://www.haomeiwen.com/subject/jmitidtx.html