vue-cli的路由配置

最新推荐文章于 2024-05-09 09:21:53 发布

Windy9193

最新推荐文章于 2024-05-09 09:21:53 发布

阅读量488

点赞数 2

分类专栏： Vue 文章标签： Vue-cli 前端

本文链接：https://blog.csdn.net/qq_42057982/article/details/89913807

版权

本文详细介绍了使用vue-cli进行vue-router路由配置的方法，包括路由管理路径、子路由配置、参数传递、重定向、别名、过渡动画、模式设置、404页面处理以及路由钩子函数和编程式导航的实践。

摘要由CSDN通过智能技术生成

vue-router路由管理路径
- 引用组件：import 组件名 from 组件路径
- 使用router-link标签制作导航：
```
 <router-link to " 'path' "></router-link> //path是路由配置里面的路径
```
- vue-router配置子路由
  - 路由嵌套使用时要在父级菜单中使用<router-view/>标签<router-view/>的作用是为子组件提供插入位置，<router-view/>也可以设置一些css样式。
  - 配置子路由需要在父组件的路由配置中加入children字段，具体使用方法如下:
```
children:[
{path:'/',component:'父组件'}，
{path:'/子组件',component:'子组件'}，
{path:'/子组件',component:'子组件'}
]
```
- vue-router如何传参
  - 父组件使用<router-link></router-link>标签来传递参数，如下：
```
<router-link :to="{name:'组件名',params:{参数值，采用键值对形式,例如:username:'jieyuhua'}}"><
```