vue的学习实战总结（保姆式学习教程）

前言

我是参考 玖月晴空 这位博主(感谢分享)的文章，综合自己的学习实操记录做了详细的笔记，大家可以看下哦~

说到vue实战，我们就会想到vue cli脚手架项目的搭建，我在写记录这篇文章之前专门写过一篇搭建文章，可参考：vue-cli 脚手架搭建

给大家安利一个vue的网页运行工具 iVuewRun网页版的vue，可直接运行使用，可以分享给身边的小伙伴噢~

---

每个Vue实例在创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期

⚠️ 注意：

1.如果在created阶段的发送ajax请求，此时页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态，请求建议放在mounted阶段，当然mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染

完毕再发生请求，可以用 vm.$nextTick。

2.子组件完成挂载后，父组件才会挂载，销毁父组件时，先将子组件销毁后才会销毁父组件

参考地址

目录结构

自用vue模板：

<template>
   <div>
   </div>
</template>

<script>
   export default {
   	   name:'',
       props:{},
       data() {
           return {}
       },
       computed:{},
       components: {},
       created(){},
       mounted() {},
       methods: {},
       watch: {},
       destroyed(){},
   }
</script>

<style scoped lang="scss">
</style>

一、添加css的多种方式。

在vue的每个组件中，可以自定义css和 js,那么如果只希望当前的css只在当前页面生效，可以在style 的标签加入scoped，这样当前页面的所有css样式，除当前组件，不会在其他组件生效并且不会影响到其他组件页面渲染。

<style scoped>

</style>

如果你引入来scss到vue项目中，那么只需在当前组件添加lang属性即可。

<style scoped lang="scss">

</style>

如果你项目中引入的是less，同样只要修改lang属性即可。

<style scoped lang="less"> 

</style>

链接形式引入css

@import 'css路径';

---

1、正常 class 样式

<template>
  <div>
    <div class="title">正常class样式</div>
  </div>
</template>

<style scoped>
  .title{
    font-size: 18px;
    color: #f00;
  }
</style>

页面结果呈现图。

2、根据data中的className对应的class，可用于动态切换class

<template>
  <div>
    <div :class="className">2.动态切换class的值</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        className:'classA'
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
  .classA{
    font-size: 18px;
    color: green;
  }
</style>

页面结果呈现图。

3、给当前的class添加判断：当isOk为true时添加class，为false时不添加:

<template>
  <div>
    <div :class="{colorRed:isOK}">3.添加判断：当isOk为true是添加class，为false时不添加</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isOK:true
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
  .colorRed {
    font-size: 18px;
    color: red;
  }
</style>

isOk为 true 页面结果呈现图。

isOk为 false 页面结果呈现图。

4、以数组的方式，一次添加多个class

<template>
  <div>
    <div :class="[classA,classB]">4.以数组的方式，一次添加多个class</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        classA:'classA',
        classB:'classB',
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
  .classA {
    font-size: 18px;
  }
  .classB{
    color: green;
    font-weight: bold;
  }
</style>

页面结果呈现图。

5、使用三元运算符判断切换class样式，当isOk为true时用的是classA，当为false的时候用的是classB:

<template>
  <div>
    <div :class="isOk?classA:classB">5.使用三元运算符判断切换class样式</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isOk:false,
        classA:'classA',
        classB:'classB'
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
  .classA{
    font-size: 18px;
    color: red;
  }
  .classB{
    color: green;
  }
</style>

isOk为 true页面结果呈现图。

isOk为 false 页面结果呈现图。

6、绑定动态的style的样式:

<template>
  <div>
    <div :style="{color:color,fontSize:font}">6.绑定style的样式</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        color: "blue",
        font: "18px",
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
</style>

结果呈现图。

7、给style绑定对象

<template>
  <div>
    <div :style="styleObject">7.给style 绑定对象</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        styleObject:{
            color:"pink",
            fontWeight:"600"
        }
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
</style>

结果呈现图。

二、关于v-if和v-show的区别

在vue中有两种隐藏元素的方式，那就是 v-if和v-show,但是两者有什么区别呢？什么时候用v-if,什么时候用v-show呢？

1.先说最大的区别,v-if 通过条件判断来渲染条件块，当为假值时，当前条件块的所有DOM元素不进行渲染；v-show同样也是条件判断，但如果v-show的值为假值时，当前条件块虽不会在页面显示，但已经渲染完毕，只是属性设置成了display：none.总结就是v-if 是通过条件判断来添加和删除DOM元素。v-show是通过display：block和display:none来控制元素的显示隐藏。
2.v-if 是有惰性的，如果初始条件为假值，则直接什么也不做，只有在条件变为真时才开始局部编译；v-show是在任何条件都被编译，然后被缓存，而且DOM元素保留，即使为假值时，在后台仍然可以看到DOM元素已经被渲染出来。
3.v-if适合在条件不太可能变化时使用，v-show适合频繁切换。
4.v-if后面可以跟v-else,或v-else-if,但v-show不可以
当v-if和v-show两个值都为true时的渲染结果，都正常渲染

<template>
  <div>
    <div v-if="isTrue">我是if条件</div>
    <div v-show="isTrue">我是v-show条件</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isTrue:true
      }
    },
    created() {},
    methods: {}
  }
</script>

<style scoped>
</style>

当v-if和v-show的值都为假值时：页面没有渲染，v-if未渲染dom元素，v-show渲染成功，但被添加了style为display：none。

isTrue为 true页面结果呈现图。

isTrue为 false页面结果呈现图。

三、关于v-for的循环

1、数组循环

<div v-for="(item,index) in nameList">{{item}}</div>

data() {
  return {
    nameList:[ '张三','小花','李四','小花']
  }
},

2、数组对象循环

<div v-for="(item,index) in nameList">
 {{item.name}}今年{{item.age}}岁啦！
</div>

data() {
  return {
    nameList:[
      {
        name:'张三',
        age:'10'
      },
      {
        name:'小花',
        age:'11'
      },
      {
        name:'李四',
        age:'12'
      },
      {
        name:'小花',
        age:'13'
      }
    ]
  }
},

3、嵌套循环

<div v-for="(item,index) in nameList" :key="index">
  {{item.name}}今年{{item.age}}岁啦！
  <span v-for="(items,indexs) in item.listItem" :key="indexs">
	 就读{{items.class}}。
  </span>
</div>

data() {
   return {
     nameList: [{
         name: '张三',
         age: '10',
         listItem: [{
           class: '三年级'
         }]
       },
       {
         name: '小花',
         age: '11',
         listItem: [{
           class: '四年级'
         }]
       },
       {
         name: '李四',
         age: '12',
         listItem: [{
           class: '五年级'
         }]
       },
       {
         name: '小花',
         age: '13',
         listItem: [{
           class: '六年级'
         }]
       }
     ]
   }
 },

-------------页面结果呈现图。-------------

四、vue中如何操作DOM元素。

假如我们要获取某个元素的文本，需要给此元素添加ref属性，并赋予名字。

<div ref="refValue">我是ref的值</div>

获取某个元素( refValue )文本（注意是this.$refs不是this.$ref）

mounted() {
  console.log(this.$refs.refValue);
},

页面结果呈现图。

五、vue-clie中关于router路由跳转

安装路由：创建项目后，在项目的根目录执行下面的命令安装路由

npm install vue-router  --save

路由安装成功后，就可以在项目中配置路由了。

1、在src文件夹下面新建views文件夹，在views文件夹下面新建home.vue和me.vue两个文件，并添加最简单的内容来细分。

示例呈现图。

2、路由配置：在src文件夹下的router文件夹下的router.js文件，引入路由和需要用到的文件，并进行跳转路由配置，也就是那个路径需要对应那个页面。

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/views/home/home'
import me from '@/views/me/me'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      name: 'me',
      path: '/me',
      component: me
    }
  ]
})

在main.js文件中，检查是否引入router配置文件。

1、router-link中的to属性方法

<router-link to="me">跳转me页面</router-link>

2、router.push()的属性方法

<div @click="$router.push('baseView')">router.push()的直接跳转方法</div>

点击切换或跳转到其他页面或组件方法

<div @click="bindClick">router.push()点击切换或跳转到其他页面或组件方法</div>

bindClick(){
	this.$router.push('/me')
}

bindClick(){
	if(条件){
		this.$router.push('/me')
	}
}

3、router-link 中的tag属性。

组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a>标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link to='/me'>router-link中的没有加tag属性。</router-link>
<router-link to='/me'tag='h1'>探究router-link中的tag属性。</router-link>

页面结果呈现图。

4、router-link中的 to的path跳转方法

<router-link :to="{ path: 'me' }">router-link中to的path跳转方法</router-link>

5、router-link中的to带查询参数跳转

<router-link :to="{ path: 'baseView', query: { userId: '597' }}">router-link中to的带查询参数跳转</router-link>

页面结果呈现图。

接收传来的值的 userId 值

<div>接受的值>>{{$route.query.userId}}</div>

created(options) {
	console.log(this.$route.query.userId,'拿到从从上个页面传过来的userId');
},

6、router中的 go属性

router的go方法是用作前进后退导航来使用的，有时实际业务需要我们添加一个返回上一页面的功能，那么我们就可以用go来实现。当为‘-1’时就可以后退到上一个路由页面。

<div @click="$router.go('-1')">go属性直接跳转</div>

<div @click="goClick">go属性点击跳转</div>

goClick(){
	this.$router.go('-1')
}

六、vue的组件封装及使用。

我前面有记录一篇关于vue组件的封装及使用文章，感兴趣的可以点击看下哦~这里就不重复写啦!

七、vue中的watch（观察者）

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

提示：当我们再次重复上一次的动作时，并不会再次打印结果，因为value值改变之后，再次点击，还是同样的值，value的值并没有再次发生变化固然不会打印结果。

字符串方法执行watch

<template>
  <div class="hello">
    <button type="button" @click="watchClick()">点击按钮执行watch</button>
  </div>
</template>

<script>
export default {
  name: 'me',
  data () {
    return {
      value:6
    }
  },
  created() {
  },
  watch:{
    value(val1,val2){
      console.log(val1,val2);
    },
  },
  methods:{
    watchClick(){
      this.value=12
    },
  }
}
</script>

页面结果呈现图。

对象方法执行watch

<template>
  <div class="hello">
    <button type="button" @click="watchClick2()">点击按钮对象</button>
  </div>
</template>

<script>
export default {
  name: 'me',
  data () {
    return {
      value2:{
        a:1,
        b:2,
      }
    }
  },
  created() {
  },
  watch:{
    value2:{
      handler(val1,val2){
        console.log("打印watch对象结果",val1,val2);
      },
      deep:true, // deep来检测对象属性
      immediate:true
    }
  },
  methods:{
    watchClick2(){
      this.value2.a=5;
      this.value2.b=10;
    }
  }
}
</script>

页面结果呈现图。

八、自定义常见指令操作

在vue中除了可以写组件，还可以使用自定义一些常见指令来实现一些常见特殊的操作。

在src文件夹下面新建common文件夹，在common文件夹下面新建directives.js文件.

1、简单的使用指令

directives.js文件

export const changeRed=(el)=>{
  el.style.backgroundColor="red"
}

引入 directives.js文件并调用changeRed

<template>
  <div>
  	// 使用v-changeRed指令
    <p v-changeRed style="width: 300px;height: 300px;">调用 directives.js文件并使用</p>
  </div>
</template>

<script>
  // 引入directives文件
  import {
    changeRed
  } from "../../common/directives.js"
  export default {
    name: 'me',
    data() {
      return {

      }
    },
     // 自定义指令
    directives: {
      changeRed
    },
    created() {},
    methods: {

    }
  }
</script>

代码截图

页面结果呈现图。

2、添加参数的自定义指令

directives.js文件

export const changeObject=(el,binding)=>{
  el.style.backgroundColor="red"
  el.style.fontSize=binding.value+'px'
}

引入 directives.js文件并调用changeObject

<template>
  <div>
    <p v-changeObject="50" style="width: 300px;height: 300px;">带参数的自定义指令</p>
  </div>
</template>

<script>
  // 引入directives文件
  import {
    changeObject
  } from "../../common/directives.js"
  export default {
    name: 'me',
    data() {
      return {

      }
    },
     // 自定义指令
    directives: {
      changeObject
    },
    created() {},
    methods: {

    }
  }
</script>

代码截图

页面结果呈现图。

3、使用变量来控制样式的自定义指令

directives.js文件

export const changeVar=(el,binding)=>{
  el.style.backgroundColor=binding.value
}

引入 directives.js文件并调用changeVar

<template>
  <div>
    <p v-changeVar="color" style="width: 300px;height: 300px;">带参数的自定义指令</p>
  </div>
</template>

<script>
  // 引入directives文件
  import {
    changeVar
  } from "../../common/directives.js"
  export default {
    name: 'me',
    data() {
      return {
        color:'blue'
      }
    },
     // 自定义指令
    directives: {
      changeVar
    },
    created() {},
    methods: {

    }
  }
</script>

页面结果呈现图。

九、跳过无需编译及避免出现{{}}

在我们的项目中应该会有很多情景，标签内的内容是不需要编译的，可是我们的代码并不知道，vue提供了一个可以直接跳过编译的指令，供我们添加在纯静态标签上。

<div v-pre> 直接跳过不需要编译的标签，加快编译效率</div>

还有一种情形，在页面有用到{{}}赋值时，有时我们页面阻塞或加载跟不上、频繁刷新时，可能会显示未赋值的{{}}，等拿到值后才能更新出来，这样给用户一种很不友好的体验，同样vue也帮我们想到了，vue提供了一个可以等待编译结束，才会显示标签内容到指令.

<div v-cloak> {{message}}直接结束编译，避免出现闪烁花括号，配合css样式书写</div>

配合css 样式完成

<style scoped>
    [v-cloak]{display: none;}
</style>

十、写一个自定义过滤器

在src文件夹下面新建common文件夹，在common文件夹下面新建filter.js文件来存放你的过滤器，并在文件中写出你想执行的过滤器的方法

filter.js文件

export const reverseStr=(value)=>{
  return value.split('').reverse().join('')
}

引入 filter.js文件并使用reverseStr

<template>
  <div>
    <p id="page">{{name|reverseStr}}</p>
  </div>
</template>

<script>
  import {
    reverseStr
  } from "../../common/filter.js"
  export default {
    name: 'me',
    data() {
      return {
        name:'我是pollyLiang'
      }
    },
    filters:{
      reverseStr
    },
    created() {},
    methods: {

    }
  }
</script>

代码截图

页面结果呈现图。

十一、Vuex的实现

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

vuex 有五种属性分别：

1、state:就像一个数据源存放地(初始化状态)，对于与一般 Vue 对象里的 data一样。
2、mutations:更改 Vuex 的store 中的状态的唯一方法是提交 mutation，可在回调函数中修改 store 中的状态。
3、action:类似于mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action
可以包含任意异步操作。
4、getter:可以对 state 进行计算操作，它就是 store 的计算属性。getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
5、moudle:当应用比较复杂时，store 对象就会变得比较臃肿，此时将 store 分割成模块，让每个模块拥有自己的 state、mutation、action、getter

提示：记得先安装并引入Vuex

npm install vuex --save

在src文件夹下面新建store文件夹，在store文件夹下面新建modules文件夹存放stores.js文件，用来封装我们的初始化状态，以及更改的方法。

在src文件夹下的store文件夹，新建index.js文件来用来统一管理我们引入modules的初始化状态，以及更改的方法。

store文件下的modules文件夹下的stores.js(一般我们常用到的比较多的是state，mutations，actionds)

// state：定义变量名(初始值)
export const state = {

};

// mutations:唯一可以修改state数据的场所，进行一些简单的操作
export const mutations = {

};

// actionds：可以包含一些异步的操作，调用mutations中的方法
export const actions = {

};

store文件下的index.js，引入必备的依赖，以及相应的导出

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const files = require.context("./modules", false, /\.js$/);
let modules = {
	state: {},
	mutations: {},
	actions: {}
};

files.keys().forEach((key) => {
  Object.assign(modules.state, files(key)["state"]);
  Object.assign(modules.mutations, files(key)["mutations"]);
  Object.assign(modules.actions, files(key)["actions"]);
});
const store = new Vuex.Store(modules);
export default store;

然后我们在main.js 文件中，引入store配置文件。

1、获取全局的变量（state）

通过 $store.state.state的变量命 方法触发

export const state = {
    pageTitle:'我是初始值'
};

在需要使用页面,直接调用即可，不用再引入其他依赖：(获取全局的变量)

{{$store.state.pageTitle}}

created() {
    console.log(this.$store.state.pageTitle,'打印');
},

页面结果呈现图。

2、更改全局的变量（mutations）

通过 $store.commit(mutations的方法, 改变的值) 方法触发

// state：定义变量名(初始值)
export const state = {
	pageTitle:'我是初始值', // 初始值为：我是初始值
    loadingShow: false  // 初始状态时：false
};

// mutations:唯一可以修改state数据的场所，进行一些简单的操作
export const mutations = {
	// 改变state里pageTitle的值
    changePageTitle(state,value){
        state.pageTitle = value
    },
    // 改变state里loadingShow状态的状态
    setLoading(state, data) {
      state.loadingShow = data
    },
  	// 公共的操作(确认)
  	loginConfirm(state){
  		console.log('确认点击操作');
  	},
    // 公共的操作(取消)
    loginCancel(state){
      console.log('取消点击操作并隐藏loadingShow');
      state.loadingShow = false
    },
};

在需要使用页面,直接调用即可，不用再引入其他依赖：(更改全局的变量)

<template>
  <div>
   <div v-if="$store.state.loadingShow">
        两秒之后store的loadingShow显示为false
        <div @click="$store.commit('loginConfirm')">确认</div>
        <div @click="$store.commit('loginCancel')">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
    }
  },
  created() {
    // 加载两秒后使用mutations下setLoading更改state下的loadingShow状态为true
    // 加载两秒后使用mutations下changePageTitle更改state下的pageTitle状态为我是修改pageTitle后的值
    setTimeout(()=>{
      this.$store.commit("setLoading", true);
      this.$store.commit('changePageTitle', '我是修改pageTitle后的值');
    },2000)
  },
  methods: {
  }
}
</script>

3、异步的操作，调用mutations中的方法（actionds）

通过 store.dispatch('actionds方法') 方法触发

// state：定义变量名(初始值)
export const state = {
    pageCount: 1
};

// mutations:唯一可以修改state数据的场所，进行一些简单的操作
export const mutations = {
    // 修改pageCount的值
    mutationsCout(state,data){
      state.pageCount = data
    }
};

// actionds：可以包含一些异步的操作，调用mutations中的方法
export const actions = {
	// 调用 mutations 下的 mutationsCout
   actionsCout(context,data) {
    context.commit('mutationsCout',data)
  }
};

在需要使用页面,调用actions下的actionsCout

<template>
  <div>
    {{$store.state.pageCount}}
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
    }
  },
  created() {
    console.log(this.$store.dispatch('actionsCout',100),'actions');
  },
  methods: {
  }
}
</script>

4、到这里基本完善啦~附上整体代码的截图

附上源码
store.js文件

// state：定义变量名(初始值)
export const state = {
    pageTitle:'我是初始值',
    loadingShow: false, // 初始状态时false
    pageCount: 1
};

// mutations:唯一可以修改state数据的场所，进行一些简单的操作
export const mutations = {
    // 修改pageTitle的值
    changePageTitle(state,value){
        state.pageTitle = value
    },
    // 改变state里loadingShow状态的状态
    setLoading(state, data) {
      state.loadingShow = data
    },
  	// 公共的操作(确认)
  	loginConfirm(state){
  		console.log('确认点击操作');
  	},
    // 公共的操作(取消)
    loginCancel(state){
      console.log('取消点击操作并隐藏loadingShow');
      state.loadingShow = false
    },
    mutationsCout(state,data){
      state.pageCount = data
    }
};

// actionds：可以包含一些异步的操作，调用mutations中的方法
export const actions = {
   actionsCout(context,data) {
    context.commit('mutationsCout',data)
  }
};

home.vue文件

<template>
  <div>
    {{$store.state.pageTitle}}
   <div v-if="$store.state.loadingShow">
        两秒之后store的loadingShow显示为false
        <div @click="$store.commit('loginConfirm')">确认</div>
        <div @click="$store.commit('loginCancel')">取消</div>
    </div>
    {{$store.state.pageCount}}
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
    }
  },
  created() {
    
    console.log(this.$store.state.pageTitle,'打印');

    // 加载两秒后使用mutations下setLoading更改state下的loadingShow状态为true
    setTimeout(()=>{
      this.$store.commit("setLoading", true);
      this.$store.commit('changePageTitle', '我是修改pageTitle后的值')
      this.$store.dispatch('actionsCout',100)
    },2000)
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

十二、通过路由传参，获取参数等

我们需要在点击操作列的详情进入下一个页面，那么我们是需要拿到相对应的参数值，并且请求数据，然后再去渲染页面，那么我们如何通过路由来实现参数的传递呢？

1、通过path,query 来传参，参数会在地址栏中显示

传参

<router-link :to="{ path: 'baseView', query: { userId: '597' }}">(前往baseView页面)通过path,query 来传参，参数会在地址栏中显示</router-link>

接参

<div>直接渲染userId的值>>{{$route.query.userId}}</div>

created() {
  console.log(this.$route.query.userId,'拿到从从上个页面传过来的userId');
},

-------------页面结果呈现图。-------------

2、通过name,param 来传参,参数不会在地址栏中显示

传参

 <router-link :to="{name:'baseView',params:{heId:'996'}}" >(前往baseView页面)通过name,param 来传参,参数不会在地址栏中显示</router-link>

接参

<div>直接渲染heId的值>>{{$route.params.heId}}</div>

created() {
   console.log(this.$route.params.heId,'拿到从从上个页面传过来的heId');
},

-------------页面结果呈现图。-------------

3、通过param动态的来传参

传参

<router-link :to="{name:'baseView',params:{sheId:sheValue}}">(前往baseView页面)动态传参</router-link>

data() {
  return {
    sheValue:'996597'
  }
}

接参

<div>直接渲染heId的值>>{{$route.params.sheId}}</div>

created() {
  console.log(this.$route.params.sheId,'拿到从从上个页面传过来的sheValue');
},

4、通过param动态参数传多个参，每个key用逗号分割

传参

<router-link tag="a" :to="{name:'baseView',params:{id:id,name:name,age:age}}" >(前往baseView页面)动态传多个参</router-link>

data() {
  return {
    id:'597',
    name:'polly',
    age:'20'
  }
}

接参

<div>
	直接渲染的值{{$route.params.id}}-{{$route.params.name}}-{{$route.params.age}}
</div>

created() {
  // 拿到从从上个页面传过来的值
  console.log(this.$route.params.id);
  console.log(this.$route.params.name);
  console.log(this.$route.params.age);
},

5、通过param数组来传参

传参

<router-link tag="a" :to="{name:'baseView',params:{pollyList:[1,2,3,4,5,6]}}" >(前往baseView页面)数组传参</router-link>

接参

console.log(this.$route.params.pollyList,'拿到从从上个页面传过来的pollyList数组');

5、 query和params的区别：

区别 ：
query通过path切换路由，params通过name切换路由。
query传参参数会在地址栏中显示，params传参参数不会在地址栏中显示。
query通过this.$ route.query来接收参数，params通过this.$route.params来接收参数。

⚠️注意，params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了，因为params传参数时候不会在地址栏中显示，这对于需要依赖参数进行某些操作的行为是行不通的，因为我们总不可能要求用户不能刷新页面吧。接下来我们来操作如何定义参数。

在src文件夹下的router文件夹，在router文件夹下打开index.js文件， params动态路由传参，在需要接收参数的路由上必须要加上参数，否则就是空白页面：

定义的路由中，只定义一个id参数

{
	name: 'baseView',
	path: '/baseView/:id',
	component: baseView
}

id是在路由中已经定义的参数，而name和age没有定义

<router-link tag="a" :to="{name:'baseView',params:{id:597,name:'polly',age:'20'}}" >params动态路由传参，在需要接收参数的路由上必须要加上参数.</router-link>

在baseView页面接收参数（一进去时候都可以正常获取到，但是页面刷新后，id依然可以获取，而name和age就不存在了。）

// 直接渲染
<div>
	params直接渲染的拿到的id ---------- {{$route.params.id}}
</div>
<div>
	params直接渲染的拿到的name ------ {{$route.params.name}}
</div>
<div>
	params直接渲染的拿到的age -------- {{$route.params.age}}
</div>

created() {
	console.log(this.$route.params.id,'传过来的id');
	console.log(this.$route.params.name,'传过来的name');
	console.log(this.$route.params.age,'传过来的age');
},

-------------页面结果呈现图。-------------

代码截图

十三、动态组件编写

此时场景为：当一个组件里面有3块内容，而且这三块内容每次展示都只展示一个tab，不会同时展现，如下图所示

在src文件夹下面的components文件夹下面新建A.vue,B.vue,C.vue三个文件。然后在src文件夹下面的views文件，在views下新建 baseView.vue文件。 （代码）

baseView.vue作为主文件。（引入components下的A,B,C三个文件）

<template>
  <div>
    <div class="base-nav">
      <div :class="[baseIndex == index ? 'active' : '', 'initialtext']" v-for="(item,index) in baseList"
        :key="index" @click="baseChange(index,item.name)">
        {{ item.title }}
      </div>
    </div>
    <!-- 用:is的方式绑定动态变量，变量改变，随之显示的组件切换 -->
    <component :is="tabContentView"></component>
  </div>
</template>

<script>
  //引入三个子组件
  import A from "../../components/A.vue"
  import B from "../../components/B.vue"
  import C from "../../components/C.vue"
  export default {
     // 注册组件
    components: {
        A, // 标签a
        B, // 标签b
        C, // 标签c
    },
    data() {
      return {
        baseIndex:0, // 选项卡的索引
        baseList:[
          {
            name: "a",
            title:'选项1'
          },
          {
            name: "b",
            title:'选项2'
          },
          {
            name: "c",
            title:'选项3'
          }
        ],
        tabContentView:'A', // 选项卡切换的内容
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      baseChange(index,name){
        this.baseIndex = index
        this.tabContentView = name || "a";
        console.log(this.tabContentView);
        if (name === "a") {
            this.tabContentView = A;
        } else if (name === "b") {
            this.tabContentView = B
        }else if (name === "c") {
            this.tabContentView = C
        }
      }
    }
  }
</script>

<style scoped>
  .base-nav {
  	width: 100%;
  	height: 40px;
  	line-height: 40px;
  	display: flex;
  	font-weight: bold;
  	background-color: #FFFFFF;
    border-bottom: 1px solid #f5f5f5;
  }
  .initialtext {
  	flex: 1;
  	text-align: center;
  	font-size: 28rpx;
  	color: #9C9C9C;
  }

  .active {
  	position: relative;
  	color: #007AFF;
  }
  .active::after {
  	content: '';
  	position: absolute;
  	bottom: 1%;
  	left: 0;
  	right: 0;
  	margin: 0 auto;
  	width: 50%;
  	height: 2px;
  	background-color: #007AFF;
  }
</style>

子组件 A.vue，B.vue，C.vue文件内容如下：

<template>
    <div>
        我是标签a的内容
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        props: {},
        components: {},
        mounted() {},
        methods: {},
        watch: {}
    }
</script>

<style scoped>

</style>

代码截图

十四、路由懒加载（也叫延迟加载）

路由懒加载可以帮我们在进入首屏时不用加载过度的资源，从而减少首屏加载速度。

1、非懒加载写法

import home from '@/views/home/home'
export default new Router({
  routes: [{
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

2、路由懒加载写法

第一种写法：

export default new Router({
  routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/views/home/home')
    }
  ]
})

第二种写法：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: resolve => require(['@/views/home/home'], resolve)
    }
  ]
})

十五、vue如何获取当前页面的url地址

当场景需要我们获取url地址，以做某些判断操作时，我们可以使用下面的方法来获取。

1、获取全部url

console.log("完整的url地址：",window.location.href)

2、获取路由路径

console.log("路由路径：",this.$route.path)

3、获取路径参数

<router-link :to="{ path: 'baseView', query: { userId: '597' }}">（跳转到baseView）带查询参数跳转</router-link>

console.log("路径参数：",this.$route.query)

页面结果呈现图。

---

有不足的欢迎指点，菜鸟记录学习，有空就会持续叠加更新噢~~~~

大家可以学习下vue的代码风格指南噢~