前言
vue 升级到3.0以后，vue-router 也发布了配套到升级 4.0+，使用路由的逻辑还是一样的只是一些方法改变了而已； 在vue开发单页面中，就算没有路由也一样可以正常使用组件完成工作，但是通常还是加入路由进行管理； 路由执行：组件（映射到）== > 路由配置 == > 渲染页面
项目目录分配
一般在使用路由的时会按照，路由执行功能，建立不同文件夹方便管理，在src目录下面；
...省略 +stc +routes index.js // 存放路由配置 +views // 渲染页面存放的文件夹 xxx.vue // 渲染路由 用户最终看到的效果, xxy.vue +components // 存放组件。功能，逻辑 xx.vue App.vue // 入口文件 main.js // 入口js ...省略
依据项目的复杂程度可以建立更多存放地，主要目的就是方便管理和维护
路由配置基础
安装 ,vue-cli 没有自带，因此需要自己安装
npm install vue-router
配置
Vue Router 4引入了 createRouter API，可以创建一个可与Vue 3一起安装的路由器实例。vue-router 低版本不兼容 vue3
打开 routes/index.js
// 引入 路由 import {createRouter,createWebHashHistory} from 'vue-router' let router = createRouter({ // url 地址的转发规则 history: createWebHashHistory(), // 在routes 中配置路由规则 routes:[ { path:'/', // 异步懒加载 推荐使用 component: () => import('../views/index.vue') }, { path:'/detail', component: () => import('../views/detail.vue') } ] } ); export default router;
在主app 加入
<router-view ></router-view>
主文件main.js 的配置 需要告诉vue 使用router 通过 use() 挂
import { createApp } from 'vue' import App from './App.vue' import router from './routes/index' createApp(App).use(router).mount('#app')
运行
npm run dev
转载请注明： 百网思 » vue3.0+cli 4 .0^ 单页面配置系列（三）-- 路由 vue-router4 基础使用
