1.下载 VueRouter 模块
在命令行中输入
yarn add vue-router
2.导⼊相关函数
在自己创建的router/index.js 文件中
import { createRouter, createWebHashHistory } from 'vue-router'
3.创建路由实例
在自己创建的router/index.js 文件中
const theFirstRouter =()=>{return import('@/views/theFirstRouter.vue')};//懒加载模式
const routes=[ // 创建路由规则
{ path: '/', component:theFirstRouter}
]
const router = createRouter({ //创建路由实例
history: createMemoryHistory(),
routes
});
export default router //导出路由实例，我这是默认导出
4.注册, 将路由实例注册到应⽤中, 让规则⽣效
此过程在main.js 文件中
import router from './router' //因为我这是默认导入；
app. use (router) //将路由交给app组件使用
5.在⽬录下, 创建需要的⻚⾯组件，并配置路由规则
先将文件组件化，然后配置路由表；
6.给路由出⼝(路径匹配的组件, 显⽰的位置)
< template ><!-- 路由出⼝ -->< router-view /></ template >
7.抽离
将所有东西写在一个页面上；抽离出来
router/index.js中写的
import { createRouter, createMemoryHistory } from 'vue-router'
const theFirstRouter =()=>{return import('@/views/theFirstRouter.vue')}; //懒加载
// 创建路由规则
const routes=[
{ path: '/', component:theFirstRouter}
]
//创建路由
const router = createRouter({
history: createMemoryHistory(),
routes
});
export default router
main.js中写
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router' //主要是红色这一部分；把代码引进去
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
