vue技术栈冲鸭

关于vue技术栈

• vuex——单页面状态管理

• vue-Router ———单页面路由管理

• axios——网络请求库

• vue ——视图开发框架

• Node——— 提供前端开发环境

1. vuex
   在单页面应用中，若使用vuex管理登录状态时，经常会存在刷新页面后登录状态消失的问题，这个问题怎么解决呢？
   在单页面应用中，若刷新页面后，登录态是保存不了的。比如我在首页获取到了登录信息，然后存储到vuex中，进入到某个路由中，若当前路由刷新后，vuex中的数据就会被清空，以此也会导致当前路由中依赖登录态的接口都会失效。
2. vue-router
   在vue中，不能用a标签作为路由跳转，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

 this.$router.push("/");

<router-link to="/">路径名</router-link>

动态路由配置：

  {
        path: "/home/:id",
        component: home
    },

嵌套路由

{
path：
component：
children:[{

}]
}

3. axios网络请求
   axios 是一个基于Promise用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

   1. 从浏览器中创建 XMLHttpRequest

   2. 从 node.js 发出 http 请求

   3. 支持Promise api

   4. 拦截请求和响应

   5. 转换请求和响应数据

   6. 取消请求

   7. 自动转换JSON数据

   8. 客户端支持防止CSRF/XSRF

• 执行get请求 参数要用param接收
• 执行post请求 参数要用data接收
• 请求封装执行，异常统一处理。。vue中采用axios处理网络请求，避免请求接口重复代码，以及各种网络情况造成的异常情况的判断，采用axios请求封装和异常拦截操作
  一些请求方法

axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.options（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）