路由守卫
// 路由守卫
// 只要进入到某个路由就会执行此方法
router.beforeEach((to, from, next) => {
// to:到达的路由 from:从哪个路由跳转的 next:只有执行了next,页面才会被渲染
console.log("打开某个路由了",to);
// eg: 判断用户是否登录
next()
})
router-link
<template>
<div>
<!-- router-link相当于a标签 ,to 属性必须并且为跳转页面的path -->
<router-link to="/about">about页面</router-link>
<!-- 带参 to内容是对象 -->
<router-link :to="{name:'about',query:{id:1,name:'bag'}}">about页面</router-link>
<router-link :to="{path:'/about'}">about页面</router-link>
<van-button type="primary" @click="handleClick1">传参形式-query</van-button>
<van-button type="primary" @click="handleClick2">传参形式-params</van-button>
</div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import {useRoute,useRouter} from "vue-router"
@Options({
components: {},
})
export default class HomeView extends Vue {
route:any = useRoute() //用来获取路由对象的数据
router:any = useRouter() //路由对象,进行进行跳转
// 方法声明
handleClick1():void{
this.router.push({
path:"/about", //也可以是name
// name:"about"
query:{
id:123
}
})
}
handleClick2():void{
this.router.push({
name:"about", //params传参必须是name,不能是path,页面刷新参数消失
params:{
id:123
}
})
}
}
</script>
接收参数:
route:any = useRoute();
// 生命周期
public created() {
console.log("参数", this.route.query);
console.log("params参数", this.route.params);
}
router-view:路由管理组件
Vuex:状态管理
import { createStore } from 'vuex'
import uInfo from "./userInfo"
export default createStore<any>({
// 初始化数据
state: {
num:1
},
// 相当于计算
getters: {
getNum(state){
return state.num + "!!!"
}
},
// 同步更改state
// commit触发mutations内的方法
// state的更改最终都是触发mutations
mutations: {
addNum(state){
state.num++
},
addNum2(state,param){
state.num+=param
}
},
// 异步更改state
// dispatch触发actions内的方法
// 可以返回promise
actions: {
addNum(context){
context.commit("addNum")
},
addNum2(context,param){
return new Promise((resolve,reject)=>{
// 进行ajax请求
// 成功/失败进行不同的操作
})
context.commit("addNum2",param)
}
},
// 取值时后面需要加上模块名
//触发方法的时候,方法名字为 "模块名/方法名"
modules: {
uInfo
}
})
<template>
<div>
<van-button type="primary" @click="handleChangeState">同步更改</van-button>
<van-button type="primary" @click="handleChangeState2">异步更改</van-button>
</div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
@Options({
components: { },
})
export default class HomeView extends Vue {
store:any = useStore()
handleChangeState():void{
// this.store.commit("addNum")
this.store.commit("addNum2",100)
console.log("更改vuex",this.store.state.num)
}
handleChangeState2():void{
// this.store.dispatch("addNum")
this.store.dispatch("addNum2",100)
console.log("更改vuex",this.store.state.num);
}
}
</script>