Vue 路由和Http

Posted 2023-04-18

参考技术A

命令行中输入 npm install vue-router --save-dev

要想使用路由，要在main.js文件中引入vue-router路由模块--- import VueRouter from \'vue-router\'

Vue.use(VueRouter)

（1）注明要使用这个路由之后，就可以在下方配置路由--- const router = new VueRouter()
（2）括号中传递对象，对象的参数是固定的。
（3）参数routes是个数组，数组里面可以拥有对应的对象。
（4）对象中的第一个参数是path，path是要路由的地址，比如下例我们的路由地址是根路径"/"
（5）对象中的第二个参数是component，如果抓到了路由的地址，需要调用一个component，component可以跳转到对应的组件地址

现在这个路由并不能被使用，因为找不到Home和HelloWorld组件。所以，我们引进Home和HelloWorld组件。（注意：这里HelloWorld组件已存在，Home组件还未创建）
import HelloWorld from \'./components/HelloWorld\'
import Home from \'./components/Home\'

（1）首先，在components文件夹下建立Home.vue组件
（2）我们要让 Home.vue成为Header.vue和Footer.vue和Users.vue的父级
（3）操作Home.vue如下，然后将App.vue中的组件和import内容清除

现在可以找到路由地址“/”，也能执行Home组件，但是没有告诉系统在哪里展示这个Home组件。这里根组件是App，所以要在App.vue当中输入对应内容。 <router-view></router-view>

上图url处仔细观察会发现，有多余的#/标识，需要去掉。因为我们自己定义路由，点击实现的时候会有问题。
在配置路由时加入一个属性 mode:"history" ，就可以去掉了

功能和a标签一致，只是点击不会每次都发送请求，刷新页面，所以项目运行速率好很多。

Vue+axios 实现http拦截及路由拦截

Vue+axios 实现http拦截及路由拦截

 

在整1个小东东，改下试试， 原来的一个东东改动。

中间需要用到 用户权限和拦截， 看了vue2的方式。

看到这文章，不错，收藏了           

http://www.cnblogs.com/parkboyoung/p/6761863.html

 

用到了  http拦截 和  路由拦截

代码就不扒了，可过去看文章

-------------

建议方式： 

http拦截建1个独立的文件， 在 main 中引入

路由正常应该都是给 弄成1个独立文件，在main 中引入

 ---------------------

这是我的部分，  其中提交数据的序列化 引入了 querystring ,   定义了一个全局相关的参数， 数据等处理更简洁一些也引入了lodash 

 

回首过去，回望你自己，你有多少事是得过且过的完成，又有多少事是用心去做并努力达到完美？