Vue-router配置的所有路径都渲染到根路径界面

我在vue-router中配置了根路径(/)后,随便填一个路径都会进入到根路径的渲染界面。
如果不配置根路径,我输入配置的其它路径,界面渲染不出东西,前端小白,希望得到各位的帮助,先谢谢大家了!
代码如下:
如果包含了‘/’路径,我在浏览器输入任意路径(如http://172.16.129.5:8080/404),都会进入HelloWorld组件的渲染,如果将‘/’路径屏蔽,输入配置的其它路径, 如http://172.16.129.5:8080/404,界面为空白,渲染不出我想要的404组件界面

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

 Vue.use(Router)
 export const constantRouterMap = [
  {
    path: '/',
    component: () => import('@/components/HelloWorld')
  },
  {
    path: '/404',
    component: () => import('@/views/404')
  },
  {
    path: '/v1/devices'
  },
  {
    path: '/v1/devices/:device_id'
  },
  {
    path: '/v1/devices/:device_id/status'
  },
  {
    path: '/v1/devices/:device_id/carriers/:carrierid',
    name: 'Carrier',
    children: [
      {
        path: 'parameters',
        name: 'Parameters'
      },
      {
        path: 'status',
        name: 'Status'
      },
      {
        path: 'cell',
        name: 'Cell'
      },
      {
        path: 'power',
        name: 'Power'
      },
      {
        path: 'auto_sniffer',
        name: 'AutoSniffer'
      },
      {
        path: 'gsm_sniffer',
        name: 'GsmSniffer'
      },
      {
        path: 'lte_sniffer',
        name: 'LteSniffer'
      },
      {
        path: 'sniffer_result',
        name: 'SnifferResult'
      }
    ]
  }
  // 404 page must be placed at the end !!!
  // {
  //   path: '*',
  //   redirect: '/404',
  //   hidden: true
  // }
]
const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
  })

const router = createRouter()

export default router

仔细看文档吧
https://router.vuejs.org/zh/guide/essentials/nested-routes.html

我的路径不是嵌套路由啊

是不是设置了重定向?

如果能提供代碼,我們會比較好理解你的問題

抱歉,考虑不周,代码我已经贴出来了,麻烦帮忙看一下

没有设置重定向,代码我已经贴出来了,麻烦帮忙看看?

你的路徑為什麼都沒有component…這樣會有東西嗎?

// mode: ‘history’, // require service support
这句话放开试试,默认的是hash模式,地址里有#,注意一下地址格式
https://router.vuejs.org/zh/guide/essentials/history-mode.html
可能是这个原因吧

1 Like

我目只写了两个测试的界面,HelloWorld和404组件,所以就只在’/'和’404’路径用了component,其它界面先空着了。

你好像不是歷史模式欸?

嗷嗷,好像可以了,多谢多谢!

是的,我根据@douchegan的建议,设置mode: 'history’就可以了,非常感谢!

建議404頁面,不需要重導向

{  // 404 Page
   path: '*',
  component: () => import('@/views/NotFound.vue'),
},

嗷嗷,不重定向这样更方便用户知道自己输错了吗,还是说有其它的隐患?