vue3路由安装配置
路由在安装脚首架时已经安装好了
路由说明
这里的参数很重要,仔细看完后,在使用的时候对于我们来讲是非常有意义的。
createWebHashHistory(process.env. BASE_URL) | hash 路由 |
createWebHistory | history 路由 |
createMemoryHistory | 带缓存 history 路由 |
parseQuery | 查询参数反序列化 |
stringifyQuery | 查询参数序列化 |
onBeforeRouteLeave | 路由离开钩子 |
创建router目录
创建router/index.js
import {createRouter, createWebHistory} from 'vue-router' //引入路由 import routes from './routes' //引入同目录下自定义路由规则文件 //创建路由 const router = createRouter({ history: createWebHistory(), routes }) export default router
创建router/routes.js
//路由规则 const routes = [ { name: 'a', path: '/a', component: () => import('@/view/a') }, { name: 'b', path: '/b', component: () => import('@/view/b') }, ]; export default routes
创建/view/a.vue 与 /view/b.vue示例页面
a.vue
<template> <div>a</div> </template>
b.vue
<template> <div>b</div> </template>
vue引入路由
main.js
import { createApp } from 'vue' import App from './App.vue' import router from './router/index' //引入路由 createApp(App).use(router).mount('#app') //注入引入
显示路由测试a、b页面
App.vue
<template> <HelloWorld msg="Welcome to Your Vue.js App"/> <router-view></router-view> //显示路由页面内容 </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </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>
路由使用方法
https://www.runoob.com/vue3/vue3-routing.html