vue - router + iView 的使用（简单例子）

所使用的工具：谷歌浏览器、Nodejs(自带npm)、HBuilder

0、要先安装Nodejs，下载安装便可

　　0-一、安装vue-cli，打开cmd 输入 npm install -g @vue/cli 安装cli服务，安装完后，咱们就有一个vue命令能够被调用了。

一、使用 vue 命令 建立一个项目

回车。

回车。

等待建立完成。

二、项目建立完成，切入到项目中

三、而后增长一些UI的支持（我这里演示使用的是 iView 你也可使用 ElementUI）

回车。

回车。

 

回车。而后等待..........

安装完成。

四、增长 router 支持。

先输入 vue add router 而后回车。

回车。

 而后等待安装..........

安装完成。

五、开启项目的服务。

　　5.1 输入 npm run serve 而后回车。

 

服务开启成功。

六、在浏览器输入http://localhost:8080/

 

 这样就能够访问到咱们的项目主页面了。

注意：V 图标上面有 Home 和 About 点击能够进行换页面。（这里使用到了router，这是咱们装router的时候，它自动给咱们作了一个演示的例子）

七、咱们来编码一下。

打开目录

去到HelloWord.vue 进行一个页面编码。

 

将里面的东西所有去掉，而后去iView官网找一个组件来使用。地址:https://www.iviewui.com/components/layout

使用这个布局吧。

 复制这个布局的演示代码。

粘贴到HelloWord.vue中。（保存）

八、主页面就变成这这样子了。

 

 七、将App.vue文件中的代码编码为：

 

 主页面就改变了。

八、修改Home.vue文件的代码（修改完成记得保存）

九、去HolleWord.vue编写一些代码

 

 

 

十、改变经过 to 获得的组件信息

十一、动态路径参数（router.js）

经过 this,$route.params（获得的是一个数组）的方法取出。

运行结果:

 

 vue-router详细使用的地址:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.htm

本次示例下载地址：https://github.com/oukele/router-demo

 

坚持就是胜利，加油！！！