vue子路由为什么不要/
时间: 2023-10-20 12:06:47 浏览: 42
在Vue中,子路由不需要在路径前面添加斜杠"/",因为它们是相对于父级路由的。所以,如果你在子路由的路径前面添加斜杠,它实际上会被视为根路径。这将导致路由无法正确匹配并渲染子组件。因此,在定义子路由时,只需要在路径中指定相对于父级路由的路径即可。例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About,
children: [
{
path: 'info',
component: Info
},
{
path: 'contact',
component: Contact
}
]
}
]
})
```
在上面的例子中,"/about"是父级路由的路径,"info"和"contact"是相对于父级路由的子路由路径。因此,子路由路径不需要添加斜杠"/"。
相关问题
vue 二级路由不写/
当Vue的二级路由不写/时,会进行路径的拼接。具体来说,在父级路由的路径后面直接跟上子路由的路径,形成一个完整的路径。例如,在你提供的代码示例中,父级路由的路径是"/abc",子路由的路径是"table",那么二级路由的完整路径就是"/abc/table"。当你点击导航中的链接时,页面会跳转到这个完整路径上。所以,如果你的父路由是根路径"/",子路由的路径可以不写"/",因为根路径是默认存在的。
vue子路由
Vue.js 支持通过嵌套路由来实现复杂的页面结构和导航。子路由是指在父路由下的一组子路由,可以在父路由对应的组件中使用 `<router-view>` 标签来显示子路由对应的组件。
在 Vue.js 中配置子路由非常简单,只需要在父路由对象中定义一个 children 数组,该数组中包含多个子路由对象,每个子路由对象都需要定义 path、name、component 等属性,例如:
```
const routes = [
{
path: '/parent',
component: Parent,
children: [
{
path: 'child1',
name: 'Child1',
component: Child1
},
{
path: 'child2',
name: 'Child2',
component: Child2
}
]
}
]
```
在上面的代码中,我们定义了一个名为 `Parent` 的父组件,它包含了两个子路由 `Child1` 和 `Child2`,它们的路径分别为 `/parent/child1` 和 `/parent/child2`。当访问 `/parent/child1` 时,Vue.js 会先显示 `Parent` 组件,然后在 `Parent` 组件中的 `<router-view>` 标签中显示 `Child1` 组件。
需要注意的是,子路由的路径不需要带上父路由的路径,它们的路径是相对于父路由的路径来定义的。在配置子路由时,我们可以使用相对路径或绝对路径来定义子路由的路径,例如:
```
const routes = [
{
path: '/parent',
component: Parent,
children: [
{
path: 'child1',
name: 'Child1',
component: Child1
},
{
path: '/child2',
name: 'Child2',
component: Child2
}
]
}
]
```
在上面的代码中,`Child1` 的路径是相对于 `Parent` 的路径来定义的,而 `Child2` 的路径是绝对路径,它不受父路由路径的影响。