iview如何实现路由跳转

1.项目结构目录：

2.用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装cnpm i vue-router -D安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级然后在 router.js 中引入所需的组件，创建 routers 对象

3.需要注意的是，export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证  main.js 也需要修改：

4.嵌套路由代码：在这个实例中，为了加深项目层级，App.vue 只是作为一个存放组件的容器

5.其中  是用来渲染通过路由映射过来的组件，当路径更改时， 中的内容也会发生更改 1）.上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候，就会在 中渲染 home.vue 组件 2).home.vue 是真正的父组件，first.vue、login.vue 等子组件都会渲染到 home.vue 中的

6.此时就需要在一级路由中嵌套二级路由，修改 routers.js

7.使用 映射路由代码home.vue 中引入了 header.vue 组件，其中含有导航菜单当点击导航菜单的时候，会切换 home.vue 中 中的内容这种只需要跳转页面，不需要添加验证方法的情况，可以使用  来实现导航的功能：

8.所有 ID 各不相同的用户，都要使用 home 组件来渲染，可以在 routers.js 中添加动态参数：