静态路由的案例
1. vite创建项目 router001
2. router001配置路由
三个组件 Bar Foo User
3.在app.vue
设置路由导航 ， 触发路由机制
①npm init vite-app router001
②cd router001
③npm i
④npm i vue-router --save
⑤npm run dev
⑥创建三个vue案例 并写入相关内容
⑦创建router 文件 子创建index.js
//引入方法
import{createRouter,createWebHashHistory} from "vue-router";
import Bar from '../components/Bar.vue'
import Foo from '../components/Foo.vue'
import User from '../components/User.vue'
// 创建路由信息对象数组 routes
const routes =[
{path:"/foo",component:Foo}, //route
{path:"/bar",component:Bar},//route
{path:"/user",component:User}//route
]
//创建路由管理器对象 router
const router =createRouter({
history:createWebHashHistory(), routes
})
// 将路由管理器对象抛出
export default router;
⑧修改app.vue 设置路由导航和路由出口
<template>
<div>
<h6>路由导航</h6>
<div>
<router-link to="/foo"> foo</router-link>
<router-link to="/bar"> bar</router-link>
<router-link to="/user">user</router-link>
</div>
<h6>路由出口</h6>
<router-view></router-view>
</div>
</template>
⑨在index.js挂载到app上
import router from './router/index.js'
createApp(App).use(router).mount('#app')
