关于vue嵌套路由路径斜杆/问题的探究
又到了“/”时刻,是不是有些激动 。。。众所周知,路径前加/代表跟路径,绝对路径,不加斜杠是相对路径。拿来一段vue路由嵌套代码,让我们搞一搞它的“/”{path:'/home',name:'Home',redirect:'/index',component:home,children:[{path:'/...
·
又到了“/”时刻,是不是有些激动 。。。
众所周知,路径前加/代表跟路径,绝对路径,不加斜杠是相对路径。
拿来一段vue路由嵌套代码,让我们搞一搞它的“/”
{
path:'/home',
name:'Home',
redirect:'/index',
component:home,
children:[{
path:'/index',
name: 'Index',
component: Index,
meta:{
requireAuth:true
}
}]
},
1.首先对于根组件上的path
如果为/home,着在浏览器地址栏输入 http://localhost:8080/home 就能直接访问
如果为home(不加/)呢,着在浏览器地址栏输入 http://localhost:8080/home 可以直接访问到吗?
答案是:不可以。原因是,不加/代表相对路径,它的相对位置在哪,我也不知道,但这里不是/
所以记着,这个路径前面一定要加“/”
2.其次根组件上的redirect
这个加不加“/”都一样,因为默认是加上的,redirect为重定向,默认使用绝对路径
3.子组件里面的path(只要能访问到子组件,父组件就会被渲染出来)
同样的如果其值为:/index代表绝对路径,通过浏览器http://localhost:8080/index 可以直接访问到
如果是 index(不加/) 呢 ,它代表是相对路径,那相对于谁呢,当然是父组件了。因此,如果你想访问次子组件就要这样访问 http://localhost:8080/home/index
这是我个人理解,如果有不对的点,欢迎大家指出
更多推荐
已为社区贡献1条内容
所有评论(0)