Vue-day08

路由

在vue-cil构建的vue单页面应用中，需要借助vue-router库,实现路由功能

配置路由表

单条路由的配置

{
path:'路由地址',
component:组件
}

嵌套路由

{
path:'/login',
component:Index,
children:[//嵌套路由
]
}

重定向

{
path:'/',
redirect:'/login'
}

404

{
path:'/:error(.*)',
component:NotFound
}

路由组件

router-link 最终渲染成a标签，用来跳路由

router-view 充当路由渲染出口

路由实例

$router 路由管理对象，负责跳路由

$route 路由对象，负责存储路由信息（地址，参数）

跳路由的两种方式

标签式导航 借助router-link渲染的a标签来跳转路由

编程式导航 借助$router的push go来跳路由，更加灵活

跳路由传参

动态路由传参

配置路由

{
path:'/detail/:id,
component:Detail
}

传参

this.$router.push("/detail/"+参数值)

接参

this..$route.params.id

固定路由传参

传参

this.$router.push({path:'/detail',query:{id}})

接参

this.$route.query.id