VUE学习笔记（二）

VUE进阶

vue-router

1、安装

npm i vue-router

2、注册

import VueRouter from 'vue-router';

//1、注册
Vue.use(VueRouter);
//2、创建一个路由对象
let router=new VueRouter({
  //所有的路由映射，没一个路由就是一个对象
  routes:[
    {
      path:"/",
      name:'Main',
      component:Main
    }

  ]
})

 

queryString

待完善

路由守卫

 

组件内路由守卫

在组件内部定义

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用
}

 

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function:回调函数

全局路由守卫

在全局的router文件中定义

router.beforeEach((to, from, next) => {
    console.log(to) => // 到哪个页面去？
    console.log(from) => // 从哪个页面来？
    next() => // 一个回调函数
}
router.afterEach（to，from） = {}

 

路由过渡的进度

npm nprogress

路由动画

<transition name="fade">
  <router-view/>
</transition>
...
</template>
<style>
.fade-enter-active {
  transition: opacity .5s;
}
.fade-leave-active {
  transition: none;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

 

打包

npm run build

会在项目根目录下生成一个dist的文件夹

嵌套路由

router

 {
      path:'/user',
      name :'User',
      component:User,
      children:[
        {
          path:'profile',
          name:'Profile',
          component:Profile
        },
        {
          path:'cart',
          name:'Cart',
          component:Cart
        }
      ]
    }

 

view

user.vue

<template>
    <div>
        <h3>用户中心</h3>
        <ul class="left">
            <!-- 这是硬编码 -->
            <!-- <router-link tag="li" to="/user/profile">基本信息</router-link>
            <router-link tag="li" to="/user/cart">我的购物车</router-link> -->
            <!-- 可以改为下面这种非硬编码 -->
             <router-link tag="li" :to="{name:'Profile'}">基本信息</router-link>
            <router-link tag="li" :to="{name:'Cart'}">我的购物车</router-link>
        </ul>
        <!-- <div class="right"> -->
            <router-view></router-view>
        <!-- </div> -->
    </div>
</template>

<script>
export default {
    'name':'User'
}

cart.vue

<template>
    <div>用户购物车列表</div>
</template>

<script>
export default {
    name:'Cart'
}
</script>

profile.vue

<template>
    <div>用户信息列表</div>
</template>

<script>
export default {
    name:'Provile'
}
</script>

设置默认子路由

// 如果需要设置默认子路由，那么path就可以留空，同时父级的name不需要设置

{
      path:'/user',
      // name :'User',
      component:User,
      children:[
        {
          path:'',
          // name:'Profile',
          name:'User',
          component:Profile
        },
        {
          path:'cart',
          name:'Cart',
          component:Cart
        }
      ]
    }

限制CSS作用域

用过scoped

<style scoped>
.left {
    float: left;
    width: 200px;
}
.left li {
    line-height: 30px;
    cursor: pointer;
}
</style>

重定向

一般有两种应用场景

• 临时改了地址

• 权限问题

案例

现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道

组件

// BookChoose.vue
<template>
    <div>
        <router-link :to="{name: 'book-boy'}">男生</router-link>
        <span> | </span>
        <router-link :to="{name: 'book-girl'}">女生</router-link>
    </div>
</template>

// BookBoy.vue
<template>
    <div>
        BookBoy
    </div>
</template>

<script>
export default {
    name: 'BookBoy',
    created() {
        localStorage.setItem('book-type', 'book-boy');
    }
}
</script>

// BookGirl.vue
<template>
    <div>
        BookGirl
    </div>
</template>

<script>
export default {
    name: 'BookGirl',
    created() {
        localStorage.setItem('book-type', 'book-girl');
    }
}
</script>

路由配置

{
  path: '/book',
  name: 'book',
  // redirect: { name: 'book-choose' }
  redirect: to => {
    let type = localStorage.getItem('book-type')
    return { name: type || 'book-choose' }
  }
},
{
  path: '/book-choose',
  name: 'book-choose',
  component: BookChoose
},
{
  path: '/book-boy',
  name: 'book-boy',
  component: BookBoy
},
{
  path: '/book-girl',
  name: 'book-girl',
  component: BookGirl
}

 

路由的滚动行为

前端路由并没有重载整个浏览器，只是通过 DOM 进行了局部更新。所以，有的时候，浏览器的一只状态会被保持，比如 滚动条，当我们在一个页面中滚动滚动条，然后跳转到另外一个页面，滚动条会保持在上一个页面中，我们其实更希望滚动条能回到页面顶部，就像重载了整个页面一样

 const router = new VueRouter({ 2 routes: [...], 3 scrollBehavior: () => ({ y: 0 }) 4 }); 

正对 后退/前进 行为，会提供一个 savedPosition 参数，通过该参数返回历史记录中的滚动值

scrollBehavior (to, from, savedPosition) {
  // console.log(savedPosition)
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；

• view，以声明方式将 state 映射到视图；

• actions，响应在 view 上的用户输入导致的状态变化。

 

state

天生具有命名空间

mutations

支持同步调用

actions

支持异步调用

mapState

可以传入数组，示例

 computed: mapState(['user'])

将仓库中state中对应的'user' 赋值给计算属性的user

也可以传入对象，适用于有命名空间的

示例

 //传入对象，适合有命名空间的
    computed:mapState({
        user:(state)=>{
            console.log(state);
            return state.userModule.user;
        }
    })

代码示例

/router/user.js

export default{
    state:{
        name:'',
        user:null
    },
    mutations:{
        uploadUser(state,payload){
            // console.log("mutations:name",name);
            state.user=payload
        }
    },
    actions:{
        async login(store,payload){ 
            // try {
                let rs= await api.login(payload);
                store.commit('uploadUser',rs.data);
                localStorage.setItem("user",JSON.stringify(rs.data));
                localStorage.setItem("token",rs.headers.authorization);
            // } catch (e) {
            //     throw e;
            // }
               
        }
    }

}

/router/index.js

import  Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import user from './user.js';
const store =new Vuex.Store({
   modules: {
       userModule:user
   }

})

export default store;

客户端调用

 await this.$store.dispatch('login', this.submitData); 

应用部署

1、打包

把项目运行过程中的资源进行整理（编译、解析......过程）

命令：npm run build

2、部署

把代码放到不同的环境下运行

• 本地部署

• 测试环境部署

• 生产环境部署

无论何种环境，首先我们需要准备（搭建）一个用来提供web服务的WebServer

3、WebServer的搭建

• nodejs来搭建

• nginx

• apache

• iis

• ......