路由 vue router @v.4x
1.安装和使用路由：
1
| npm install vue-router@4
|
在src目录下新建router目录index.js文件
1
2
3
4
5
6
7
8
9
10
| import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
|
在main.js中使用：
1
2
3
4
5
| import router from './router/index.js'
const app = createApp(App);
app.use(router)
|
2.配置文件系统别名
在vite.config.js中
1
2
3
4
5
6
7
8
9
10
11
|
import path from 'path'
...
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~': path.resolve(__dirname,"src")
}
}
|
3.配置路由
router目录index.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
| import Index from '~/pages/index.vue'
import About from '~/pages/about.vue'
const routes = [{
path:"/",
component: Index
},{
path:"/about",
component: About
},{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
}]
|