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