# vue_shop

**Repository Path**: upupupy/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: 使用vue-cli创建项目，使用vue-router进行路由跳转，使用vue-axios实现数据请求，使用element-ui实现界面显示。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-24
- **Last Updated**: 2021-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_shop

## 初始化
```
npm install
```

### 运行
```
npm run serve
```

### 打包
```
npm run build
```

## 使用vue ui 可视化创建项目

```
// 终端输入
vue ui
```

## 安装elementUI插件

```
// 使用终端进行安装
npm i element-ui -S
```

## vue-router进行路由跳转

```
npm install router
```

> 1、定义（路由）组件
>
> 2、定义路由
>
> 3、创建router实例
>
> 4、创建或挂载根实例

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

//定义（路由）组件
const Login = () =>
  import ('../components/Login.vue');

const Home = () =>
  import ('../components/Home.vue');
const Welcome = () =>
  import ('../components/Welcome.vue');
const Users = () =>
  import ('../components/user/Users.vue');
const Rights = () =>
  import ('../components/power/Rights.vue');

const Roles = () =>
  import ('../components/power/Roles.vue');
const Cate = () =>
  import ('../components/goods/Cate.vue');

const Params = () =>
  import ('../components/goods/Params.vue');

const GoodsList = () =>
  import ('../components/goods/List.vue');

const Add = () =>
  import ('../components/goods/Add.vue');

const Order = () =>
  import ('../components/orders/Order.vue');

const Report = () =>
  import ('../components/report/Report.vue')

// 全局安装路由
Vue.use(VueRouter)

// 定义路由
const routes = [{
    path: '',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [{
        path: '/welcome',
        component: Welcome
      },
      {
        path: '/users',
        component: Users
      },
      {
        path: '/rights',
        component: Rights
      },
      {
        path: '/roles',
        component: Roles
      },
      {
        path: '/categories',
        component: Cate
      },
      {
        path: '/params',
        component: Params
      },
      {
        path: '/goods',
        component: GoodsList
      },
      {
        path: '/goods/add',
        component: Add
      },
      {
        path: '/orders',
        component: Order
      },
      {
        path: '/reports',
        component: Report
      }
    ]
  }
]

// 创建router实例
const router = new VueRouter({
  mode: 'history',
  routes
})

// 导出，在main.js导入
export default router
```

> 通过注入路由器，我们可以在任何组件内通过 `this.$router` 访问路由器，也可以通过 `this.$route` 访问当前路由。

> 重定向：redirect
>
> 别名：alias

### 导航守卫

> “导航”表示路由正在发生改变。·``注意参数或查询的改变并不会触发进入/离开的导航守卫`

- #### 全局前置守卫

  ```JavaScript
  const router = new VueRouter({ ... })
  // 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。
  router.beforeEach((to, from, next) => {
    // to 即将进入的目标路由对象
      // from 当前导航正要离开的路由
      // next:function:一定要调用该方法来resolve这个钩子。
  })
  
  // 确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。
  ```

- #### 全局解析守卫

  ```
  router.beforeResolve 注册一个全局守卫。和全局前置守卫类似，区别是：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
  ```

  

- #### 全局后置钩子

  ```javascript
  router.afterEach((to,from)=>{
    // 和守卫不同的是，这些钩子不会接受next函数，也不会改变导航本身
  })
  ```

  

- #### 路由独享的守卫

  ```javascript
  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ]
  })
  ```

  

- #### 组件内的守卫

  ```javascript
  beforeRouterEnter
  beforeRouterUpdate
  beforeRouterLeave
  const Foo = {
    template: `...`,
    beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
        
      next(vm => {
      // 通过 `vm` 访问组件实例
    })
        
    },
    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
  }
  ```

  ### 完整的导航解析流程

  1. 导航被触发
  2. 在失活的组件里调用`beforeRouteLeave`守卫
  3. 调用全局的`beforeEach`守卫
  4. 在重用的组件里调用`beforeRouteUpdate`守卫
  5. 在路由配置里调用``beforeEnter`
  6. 解析异步路由组件
  7. 在被激活的组件里调用`beforeRouteEnter`
  8. 调用全局的`beforeResolve`守卫
  9. 导航被确认
  10. 调用全局的`afterEach`钩子
  11. 触发DOM更新
  12. 调用`beforeRouteEnter`守卫中传给`next`的回调函数，创建好的组件实例会作为回调函数的参数传入。

## axios进行异步请求数据