1.在项目根目录下新建一个Router文件夹,里面创建index.js Routes.js文件,
index.js代码
import { createRouter, createWebHashHistory } from 'vue-router'
import Routes from './Routes'
const router = createRouter({
history: createWebHashHistory(),
routes:Routes
})
export default router
Routes.js代码
export default [
{
path: '/',
redirect: '/aPage'
},
{
path: '/aPage',
name: 'aPage',
component: () => import('@/views/aPage.vue')
},
{
path: '/bPage',
name: 'bPage',
component:()=>import('@/views/bPage.vue')
}
]
这里以aPage举例,
<template lang="cn">
<div>
<h1>欢迎登录wzzzzzzzzs</h1>
</div>
</template>
<script>
//import { useRouter } from "vue-router";
export default {
name:'aPage',
setup() {
}
}
</script>
<style lang="">
</style>
对应Routes.js的redirect直达代码,意思是当通过localhost:8080访问时,直接进入的就是aPage.vue的界面,想访问其他界面可以修改Routes.js的代码,在对应的view的文件夹下新建页面,放入到路由当中,下面是APP.vue和main.js的代码
APP.vue
注意一定要加 <router-view></router-view>,否则不会加载路由页面。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import myTest from './components/myTest.vue';
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
//import Vue from 'vue'
//import Router from 'vue-router'
import router from './Router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')