百网思正是上线了。欢迎围观

vue3.0+cli 4 .0^ 单页面配置系列(三)-- 路由 vue-router4 基础使用

前端 ynlmq 1905浏览 0评论

前言

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 基础使用

喜欢 (25) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽