vue3路由配置

126 阅读1分钟

1.下载包

npm install vue-router --save (我目前采用"vue-router": "^4.1.5")

2.router

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const test1 = () => import('../pages/test1.vue');
const test2 = () => import('../pages/test2.vue');


const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/test1', name: 'test1', component: test1 },
    { path: '/test2', name: 'test2', component: test2 },
  ],
})

export default router

1663319909889.png

app.vue

<template>
  <router-view></router-view>
</template>

3.main.js 引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'


createApp(App).use(router).mount('#app');

4.效果

1663320062906.png

参考: vue router