细说vue 路由

在之前的文章《搭建第一个简易vue工程》中有简略提到过vue路由的配置，见：搭建第一个简易vue工程_百变码农的博客-CSDN博客

这里再专门针对vue路由，完整记录下详细配置过程

1. npm 安装 vue-router

npm install vue-router -g

详见《vue 环境搭建配置》vue 环境搭建配置_百变码农的博客-CSDN博客_服务器搭建vue环境

2. vue工程引入路由

main.js 引入路由配置文件

App.vue 主界面添加路由视图 router-view 加载位置

3. router/index.js 路由配置

页面中获取路由路径参数

 <h2>{{ $route.params.name }}</h2>

4. router-link 路由菜单配置

除了使用<router-link>创建 a 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现.

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用this.$router.push

当点击 <router-link>时，等同于调用 this.$router.push(...)

// 路由路径

this.$router.push({ path: 'home' })

// 路由命名

this.$router.push({ name: 'user', params: { userId: '123' }})

5. 在需要展示路由的公共界面中引入导航菜单

6. 嵌套路由

7. elemet-ui 的el-menu 结合vue-router

要在el-menu里加上router属性，然后el-menu-item的index属性对应的是跳转路径