vue-router踩坑

配置了路由,
假设是下面这样的:

{
  path: '/',
  redirect: '/login1'
},
{
  path: '/login1',
  component: Login1,
},
{
  path: '/login2',
  component: Login2,
}

现在访问 localhost:8080,都知道会跳转到 Login1 这个组件的页面对吧,此时 url 为 localhost:8080/#/login
接着我要访问 Login2 组件页面, 然后我把 url 改为 localhost:8080/login2
接下来就是见证奇迹的一刻:我来到了 Login1 组件页面
为什么?百思不得其解
查找答案的心酸过程放下不表,直接记录答案吧
正确的 url 路径为: localhost:8080/#/login2
中间必须加个 ‘#’
也就是说如果路由配置是这样的:

{
  path: '/a',
  component: A,
},
{
  path: '/b',
  component:B,
}

那么访问时的路径是:

  1. localhost:8080/#/a
  2. localhost:8080/#/b
    而不是:
  3. localhost:8080/a
  4. localhost:8080/b

如果是直接在浏览器输入路径访问要记得加 # 啊啊啊啊啊啊啊啊啊啊
...
刚开始接触 vue-router 时就发现它会加一个 #
还查了一下为什么以及解决方法,但是要服务器端配置,自己也看不懂,就不了了之了
而且以前都是直接在页面上点击 a 标签跳转的,它自己自动加上了 #
结果这次有一个页面直接访问根路径进不去,需要手动输入 url,结果死活进不去这个页面,也完全忘记了 # 这个茬
想想这两天为了这个问题到处查啊问啊的我简直像个sb。
为什么会犯这样的错误?
基础不好?
不会搜索?
分析能力也不够:
当不管访问哪个页面时都跳转到了从根路由进入的页面,很容易就应该想到我输入的路径是错的(但是我不是很明确的知道 vue 访问不存在的路径时会跳转到根路由(它为什么不设置成报错呢啊啊啊啊啊啊!),说明我基础不好(但是官方文档有说吗?),然后就应该往路径哪里错了的方向查找,这时候应该就很容易找到问题关键了。
但其实我一直在搜索:vue-router 访问 跳转到根路由 这些关键字,......不想说话了

你可能感兴趣的:(vue-router踩坑)