Vue路由跳转后改变了原来地址的结构?

Question

问题描述

我有一个地址 如 user.html
通过参数id 来区分是哪个用户 如 user.html?id=5

一个用户又分几个子路由 如 详细信息, 作品, 关注的人
对应路由 #/home #/work #/follow

于是就有了地址
user.html?id=5#/home 查看用户id为5的详细信息,,
user.html?id=5#/work 查看用户id为5的作品,,

我在用户列表页 userlist.html 中 只需要加连接 location.href = "user.html?id="+id
这样到页面 user.html中我的路由 / redirect 到 home

地址就应该是 user.html?id=5#/home 这样的.

问题来了...

我之前在 f 盘,,可以实现 以上的功能 后来我把这个项目考到 E盘的某一个目录 ,,然后 npm install 安装依赖,

运行 npm run serve

打开userlist.html 点用户后 打开 user.html?id=5 这个时候,出问题了..

vue自己反地址变成了 user.html#/home?id=5 这样我原来能过 search部分获取id就失败了...

问题出现的环境背景及自己尝试过哪些方法

我后来双试过把id 放到路由中,,,如 #/home/:id 然后 $route.params.id 获取...

但是我路由很多,感觉这样很恶心 看看下边的代码

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

{
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home/:id',
      name: 'home',
      component: Home
    },
    {
      path: '/avatar/:id',
      name: 'avatar',
      component: Avatar
    },
    {
      path: '/follow/:id',
      name: 'follow',
      component: Follow
    },
    {
      path: '/work/:id',
      name: 'work',
      component: Work
    },
    {
      path: '/team/:id',
      name: 'team',
      component: Team
    },
    {
      path: '/like/:id',
      name: 'like',
      component: Like
    },
    {
      path: '/addwork/:id',
      name: 'addwork',
      component: AddWork
    },

而且每次路由跳转都要在 后边加上这个id 而且 这个id 其实是和user 关联的,,,
放到路由后边 #/home/5 这样 还有 #/work/5 这是什么意思..
作品的id为5的路由吗..很烦有没有..

你期待的结果是什么？实际看到的错误信息又是什么？

我希望实现 user.html?id=5#/home 这样的方式切换路由

Answer 1

修改路由为 history 模式 ，而非 hash

• HTML5 History 模式 | Vue Router