vue路由去掉井号

要去掉 Vue 路由中的井号，需要使用 HTML5 History 模式。具体步骤如下：

1. 在 Vue Router 中，设置 mode 为 history。

2. 配置服务器，让所有请求都返回 index.html 文件。

3. 在 index.html 文件中，添加 base 标签，指定应用程序的基本路径。

示例代码如下：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

// 服务器配置
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

// index.html 文件中，添加 base 标签
<base href="/">

这样就可以去掉路由中的井号了。

相关问题

vue路由 webpack

### 如何在 Vue 项目中使用 Webpack 配置路由

#### 安装必要的工具和依赖项
为了开始配置，需要先安装 `vue-cli` 和其他必需的开发环境组件。这可以通过执行以下命令来完成：

npm install --global vue-cli

接着可以初始化一个新的基于 Webpack 模板的 Vue 项目[^1]。

#### 初始化新项目
通过运行下面这条指令创建一个名为 `my-vueRouter-project1` 的新项目:

vue init webpack my-vueRouter-project1

此操作会引导用户设置项目的各种选项，并自动生成所需的文件结构以及基础配置[^3]。

#### 添加 Vue Router 到项目里
一旦基本框架建立完毕，在项目根目录下打开终端窗口继续下一步骤的操作。首先需安装 `vue-router` 库作为依赖包之一：

cd my-vueRouter-project1
npm install vue-router@latest --save

之后可以在 src 文件夹内新建 router.js 或者 index.js 来定义应用中的不同页面路径及其对应的视图组件[^2]。

#### 编写简单的路由规则
编辑刚刚创建好的 JavaScript 路由文件 (例如命名为 `router/index.js`) ，添加如下所示的基础路由逻辑：

import Vue from 'vue'
import Router from 'vue-router'

// 导入要展示的不同页面组件
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')

Vue.use(Router)

export default new Router({
  mode: 'history', // 使用 HTML5 History Mode 去掉 URL 中的 #
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    }
  ]
})

上述代码片段展示了如何注册两个简单页面——首页 (`Home`) 及关于页(`About`) 并将其关联至特定URL地址上。

#### 更新 main.js 加载路由器实例
最后一步是在应用程序入口处引入刚编写的路由模块并挂载到 Vue 实例当中去。修改位于src下的main.js文件内容如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由对象

new Vue({
  el: '#app',
  render: h => h(App),
  router, // 将路由注入到整个 app 下面
}).$mount('#app')

这样就完成了在一个典型的 Vue CLI 构建的应用程序中集成 Webpack 处理路由的基本流程。

vue路由跳转出现重复的路由

Vue Router 中出现重复路由的问题通常是由于以下原因导致的：

1. **配置错误**：在 `router.js` 文件中，如果两个或更多的路由配置了相同的路径（`path` 或者 `name`），这可能导致重复的导航。检查所有路由配置，确保每个路径只有一条。

2. **动态匹配**：动态路由可能会因为参数的不同而误认为是重复的。例如，`'/users/:id'` 和 `'/users/:userId'` 如果不加限制，可能会造成冲突。确保动态部分的命名一致并且解析规则明确。

3. **使用 `exact` 属性**：当你使用 `exact` 标志时，只有完全匹配才有效。如果没有设置，当路径包含父级路由的路径时，会被视为重复。考虑去掉 `exact` 或更改路径模式以避免这种覆盖。

4. **嵌套路由**：如果在子路由中定义了同名的路由，且父路由试图访问这个子路由，也可能会显示重复。确保嵌套结构清晰，避免路径层级混乱。

5. **全局守卫**：全局守卫如 `beforeEach` 可能意外地导致循环路由，特别是当它们改变当前路由并触发导航到新路由时。

要解决这个问题，你需要定位并修正具体的配置，确保每个路由都有唯一的标识，并避免上述情况的发生。如果需要进一步帮助，请提供详细的路由配置代码以便于分析。