vue子路由
写法一:
router目录下的index.js
{path:'/Cart',name:"cart",component:Cart,children:[
{path:"/login",name:"login",component:Login},
{path:"/res",naem:"res",component:Res}
]},
二级路由的父组件 Cart组件
<template>
<div>
<div>
<router-link to="/login">登录</router-link>
<router-link to="/res">注册</router-link>
</div>
<router-view></router-view>
</div>
</template>
写法二:
router目录下的index.js
{path:'/Cart',name:"cart",component:Cart,children:[
{path:"login",name:"login",component:Login},
{path:"res",naem:"res",component:Res}
]},
二级路由的父组件 Cart组件
<template>
<div>
<div>
<router-link to="/cart/login">登录</router-link>
<router-link to="/cart/res">注册</router-link>
</div>
<router-view></router-view>
</div>
</template>
两者区别?
第一种写法,path路径有 斜杠 , 这样的话在路由出口只需写 /路径
第二种写法,path路径没有 斜杠 , 这样的话要在路由出口写上父路径
两种写法得到的结果是不一样的,
第一种导航栏的路径 http://localhost:8081/#/res
第二种 http://localhost:8081/#/cart/res
但是功能却是一样的