vue-router的base配置项解释

Amodoro

已于 2024-10-31 16:14:03 修改

阅读量3.3w

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js chrome 前端

于 2020-04-07 20:21:40 首次发布

原文链接：https://www.liangzl.com/get-article-detail-32017.html

各位大佬，小弟周末有空兼职前端开发，有介绍请您务必私信我！！

new Router({
  mode: 'history', // 访问路径不带#号
  base: '/page/aa',  // 配置单页应用的基路径
});

页面这样访问 http://localhost:8080/page/aa/ 和 http://localhost:8080/ 访问的效果是一样的。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Amodoro

关注关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue-router 源代码全流程分析「长文」

微信-sjk6070

06-30

806

说明以下内容均是依托 vue-router 2.0.0 版本展开分析。此篇文章，是自己对 vue-router 实现分析的记录性文章，如有任何错误，欢迎指正，相互交流。基础使用 import Vue from ‘vue’; import VueRouter from ‘vue-router’; Vue.use(VueRouter); const Home = { template: ‘hom...

vue-router(进阶版)

2302_76609856的博客

04-08

1211

之前的路由写法虽然可以使用但是会导致main.js过于臃肿,所以后续基本不会再这么使用了,声明式导航是指在 Vue 组件的模板（template）中，通过使用组件来创建导航链接。这些链接与普通的 HTML a 标签类似，但它们是专门设计用于与 Vue Router 集成，能够自动处理基于路由的导航。编程式导航是指在 Vue 组件的 JavaScript 部分（通常是 methods 或其他事件处理器中）通过调用 this.$router 对象上的方法来直接控制路由的切换。

4 条评论您还未登录，请先登录后发表或查看评论

vue-router base选项和路由hash与history模式。

cccqd的博客

04-29

5172

base 选项的默认值为 “/”， 1.当想要一个域名运行多个项目的时候，这时候需要把 const router = new VueRouter({ base:'xinwen2', routes, }) 里面的base值是代表我们项目的名称，可以随意起， 2.接下来将vue.config当中添加 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpil

Vue2 Router 深度解析与实战指南

热门推荐

atu1111的博客

11-17

2万+

vue-router的base和vue.config.js的publicPath区别和联系 vue-router的base官方文档解释： base 类型: string 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" vue.config.js的publicPath官方文档解释： 1.只设置vue-router的base配置配置路由基准路径为app,vue.config.js配置文件的publicPath为相对路径

【vue】vue-router的base和vue.config.js的publicPath区别和联系:

SunPeng的博客

06-08

2620

【vue】vue-router的base和vue.config.js的publicPath区别和联系:

解决vue-router进行build无法正常显示路由页面的问题

08-27

const router = new VueRouter({ mode: 'hash', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) ``` 五、注意事项在使用Vue-Router时，开发者需要注意的是，在进行Build时，需要...

【vue-router源码】三、理解Vue-router中的Matcher

MAXLZ的博客

06-06

2697

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将带你理解vue-router的matcher。

vue 项目打包通过命令修改 vue-router 模式修改 API 接口前缀

12-11

因此，命令行中新增了一个`mode`配置项，允许用户在构建时选择路由模式。例如，`npm run build "hash"`会保持源代码中的API前缀，并使用`hash`模式，而`npm run build https://192.168.166.101:8444 history`会设置...

vue-router(3.5.1)源码梳理

Caristop3_走在前端这条大道上

04-09

3300

如何理解vue-router源码？ vue-router 源码分析 date: 2021-03-26 1. import Vue VueRouter 进来 2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”

vue-router 的base 配置项的解释

weixin_45677987的博客

10-08

1484

1: new VueRouter({ mode: 'history', // 访问路径不带#号 base: '/page/aa' // 配置单页应用的基路径 })

Vue路由

weixin_64987028的博客

04-30

361

目录 SPA介绍 1、SPA是什么？ 2、单页面应用程序： 3、使用SPA的优势： 4、Jsp和Html哪一个性能更好？ 5、SPA实现思路和技术点二、Vue路由的简介 append 三、js中const,var,let区别？分别写一个例子 SPA介绍 1、SPA是什么？单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该...

Vue Router入门--基础

任性的wo的博客

06-10

689

目录介绍基础动态路由匹配嵌套路由编程式的导航命名路由命名视图重定向和别名路由组件传参 HTML5 History 模式介绍 Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.j...

Vue-Router中base应用

计划好了再娶吧

02-08

3719

根据官方文档的描述 The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value “/app/” 因为我们平常开发测试运行时候一般执行 npm run serve ... App running at: - Local: http://localhost:8080 - Network: ht

vue-router的base和mode配置项

atu1111的博客

09-07

3155

vue-router的base和mode配置项路由代码如下： const router = new VueRouter({ mode: 'history', base: '/vue', routes }) 1) mode mode: 'history’表示，访问路径不带#号，如：http://localhost:8080/vue 2) base 配置单页应用的基路径，当点击路由时： <router-link to="/">Home</ro

vue将路由改为history模式下并设置路由base

qq_57305148的博客

03-23

1193

那就可能是assetsDir 路径错误。在传递router配置里添加。到这里会发现页面无法访问。

vue2如何安装vue-router

01-26

### 安装 Vue Router 为了在 Vue 2 项目中集成 `vue-router`，需执行如下操作： #### 使用 npm 或 yarn 安装依赖包通过命令行工具运行以下指令来安装 `vue-router` 库作为项目的开发依赖项[^1]。 ```bash npm install vue-router ``` 或者如果更倾向于使用 Yarn，则可以输入: ```bash yarn add vue-router ``` #### 配置 main.js 文件完成上述步骤之后，在 `src/main.js` 中导入必要的模块，并初始化一个新的路由器实例。这一步骤确保了整个应用程序都能访问路由配置[^2]。 ```javascript import Vue from 'vue' import App from './App.vue' // 导入刚刚安装好的vue-router库 import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: () => import('./components/Home') }, { path: '/about', name: 'About', component: () => import('./components/About') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) new Vue({ render: h => h(App), router, // 将创建的router对象传递给根实例 }).$mount('#app') ``` 以上代码片段展示了如何定义简单的路径映射以及设置历史模式下的基础 URL 和注册组件的方式[^3]。