9月21日 vue基础课程（vue2）27-40

最新推荐文章于 2024-09-30 16:19:08 发布

努力不小白

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量281

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45330080/article/details/126999134

版权

9月21日 vue基础课程（vue2）27-40

27. 路由安装和介绍

Vue路由（router 、单页面应用、SPA）
单页面应用：一个url (只有一个html)
1> 跳转不同组件
2> 路径传值（url传值）
3>拦截
使用：
vue create <项目名称>
选择自定义安装：安装 Router
目录结构：
router/index.js ====》路由的配置
views ====》页面（说白了就是组件）
components ====》页面模块

28. 路由跳转流程

// app.vue文件
 <router-view />
 <router-link to="/list">分类</router-link>

// router/index.文件
import List from "../views/List.vue";
const routes = [
  {
    path: "/list",
    name: "List",
    component: List,
  }
];

29. router-link相关配置

to ：表示目标路由的链接
1> 跳转形式

 <router-link to="/my" tag='div'>我的</router-link>
 <router-link :to='{path:"/my"}'>新的path我的</router-link>
 <router-link :to='{name:"Cart"}'>新的name购物车</router-link>

2> 路径传值
<router-link :to='{name:"Cart",query:{a:1}}'>新的name购物车</router-link>

tag
默认生成a标签，如果希望修改 tag=‘li’

组件形式的跳转方式

 replace
 	<router-link :to="{ path: '/abc'}" replace></router-link>
 append

exact : 精准路由配置模式

通过js跳转的方式

 router.push ： 打开新页面，并且可以返回上一页
 this.$router.push('/list');

 router.replace ： 打开新页面，不能返回上一页
 this.$router.replace('/list');

 router.go   ： 打开新页面，跳转几层
 this.$router.go();

 router.back ： 返回上一页
 this.$router.back();

***传值

 	this.$router.push({
         path:'/list',
         query:{
           type:'selectList'
         }
     });

30. router内文件配置

const routes = [
  //直接引入
  {
    path: "/home",
    name: "Home",
    component: Home,
    //子路由
    children:[
      {
        path:'/',
        name:'/',   //默认显示Tj.vue
        component: () =>
        import("../views/Tj.vue")
      },
      {
        path:'/tj',
        name:'/tj',
        component: () =>
        import("../views/Tj.vue")
      },
      {
        path:'gz',
        name:'gz',
        component: () =>
        import("../views/Gz.vue"),
      }, 
    ]
  },
  //懒加载路由
  {
    path: "/about",
    name: "About",
    component: () =>
      import("../views/About.vue"),
  },
  //重定向
  { path: '/', redirect: '/home' }   //没有找到，跳转到此路径
];

31. 路径传值

传值

 // this.$router 使用路由，跳转页面，查看模式
 this.$router.push({
     path:'/about',
     query:{
       a:1
     }
 })

接收

 this.$route.query   //接收传过来的值，判断当前路由

32. 导航守卫(拦截）

全局

 router.beforeEach((to,from,next)=>{})
 router.afterEach((to,from,next)=>{})

组件内守卫

 beforeRouteEnter((to,from,next)=>{})
 beforeRouteUpdate((to,from,next)=>{})
 beforeRouteLeave((to,from,next)=>{})

路由独享
```
 beforeEnter((to,from,next)=>{})
```
to : 这是你跳转到哪个路由对象
from : 这是你要离开的路由对象
next : 是一个方法，可以接收参数。这个方法是必须调用，如果不使用就跳转不过去，你可以把next看做一个保安，必须要跟next打个招呼你才可以通过。
next() =》就是告诉保安为要过去，去哪里就是to
next(false) =》可以不通过，中断跳转
next(‘/’) =》就意思是保安不让过，你可以去另外一个地方进行通过

33. watch(监听)

监听路由的变化

 watch:{
     $route( to,from ){
       //to  最新的路由
       //from 上一次的路由
       console.log( to.path , from.path );
     }
 }

监听数据的变化

 watch:{
 	a(to,from){
 		//to  最新的
 		//from 上一次的
 		console.log(to,from)
 	}
 }

深度监听
监听b但是是b的c改变了，所以要监听b内所有的属性变化，就要用到深度监听

 data () {
 	return {
 		b:{c:1}
 	}
 }
 watch:{
 	b:{
 		handler(to){
 			console.log('B:',to.c)
 		},
 		//深度监听
 		deep:true
 	}
 }

34. Vuex中的state

35. Vuex中的getters

36. Vuex中的mutations

37. Vuex中的actions

38. actions和mutations

Vuex：状态管理（集中式存储管理应用的所有组件的状态）
store : 商店
Vuex有哪些属性

state: {}, ==> 就是来放入数据的[类似于组件中的data]
getters:{}, ==> 就是一个计算属性[类似于组件中的computed]
mutations: {}, ==> 就是一个存放方法的[类似于组件中的methods]
actions: {}, ==> Action 类似于 mutation [Action 提交的是 mutation，而不是直接变更状态。]
modules: {}, 每一个模块都有state、getters、mutations、actions，分成多个模块了

state数据如何拿到
{{ $store.state.a }}
{{ a }} {{ b }} {{ arr }}

 <script type="text/javascript">
 import {mapState} from 'vuex'
 export default{
 	computed:{
 		...mapState(['a','b','arr'])
 	}
 }
</script>

getters 使用

 <script type="text/javascript">
 import {mapGetters} from 'vuex'
 export default{
    computed:{
 	 ...mapGetters(['total'])
   }
}
</script>

mutations 使用

<script type="text/javascript">
import {mapMutations} from 'vuex'
export default{
    methods:{
 	    ...mapMutations(['changeBtn'])
     }
}
</script>

actions 使用
actions是来提交mutations通过commit

actions: {
    checkedFn({commit,getters}){
 	   getters.checkAll ? commit('unCheckAll') : commit('checkAll')
 	}
}

面试题：actions和mutations区别 [高频]
Action 提交的是 mutation，而不是直接变更状态。
mutations 是同步的
actions 可以包含任意异步操作
***actions更加容易调试

总结
mapState、mapGetters放在组件中的computed中
mapMutations、mapActions放在组件中的methods中

39. Vuex目录文件管理

vuex的属性分离

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {},
});

mutations-types.js文件放入常量
export const BTN = 'btn';
export const ADD = 'add';

//mutations.js引入
import {BTN,ADD} from './mutations-types'
export default{
	[BTN](){
		alert(  1 );
	},
	[ADD]( state ){
		state.num +=1;
	}
}

40. Vuex中的modules

modules: {}, 每一个模块都有state、getters、mutations、actions，分成多个模块了
index.js引入

import path from './modules/path'
import order from './modules/order'

export default new Vuex.Store({
  modules: {
  	path,
  	order
  }
});

modules/path.js文件

export default{
	state:{
		list:['地址1','地址2']
	},
	getters:{},
	mutations:{
		btn(){
			alert(1);
		}
	},
	actions:{}
}

使用

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name: "Home",
  computed:{
  	...mapState({
  		pathList:state=>state.path.list
  	})
  },
  methods:{
  	...mapMutations(['btn'])
  }
};
</script>