vue-router的使用
- 导入vue-router
npm install vue-router@next --save
- 编写router.ts文件
import {createRouter, createWebHistory} from 'vue-router'
import Login from "@/pages/Login.vue";
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
name: 'login',
component: Login
},
]
})
export default router
- main.ts内导入路由
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
const app = createApp(App)
app.use(router)
app.mount('#app')
- app.vue内使用路由
<template>
<div class="container-fluid">
<GlobalHeader :user="user"></GlobalHeader>
<router-view></router-view>
<footer class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">作者:陈昭良</a>
</footer>
</div>
</template>
- 路由跳转
静态路由跳转,在router-link标签内写:to属性,即可跳转
<li class="list-inline-item"><router-link class="btn btn-outline-light my-2" :to="{name: 'login'}">登录</router-link></li>
<li class="list-inline-item"><router-link class="btn btn-outline-light my-2" :to="{name: 'login'}">注册</router-link></li>
动态路由跳转
import {useRouter} from "vue-router";
const router = useRouter()
const onFormSubmit = (value: boolean) => {
if (value) {
router.push({name: 'home'})
}
}
vuex的使用
- 安装vuex
npm install vuex@next --save
- 编写store.ts文件,存放一些全局对象
import {createStore} from 'vuex'
const store = createStore({
state: {
user: {isLogin: false}
},
mutations: {
}
})
export default store;
- main.ts中导入vuex
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
- 调用,采用commit方法
import {useStore} from "vuex";
const store = useStore()
const onFormSubmit = (value: boolean) => {
if (value) {
store.commit('updateUser', {isLogin: true, name: '陈昭良', id: 1})
router.push('/')
}
}
响应式的展示
import {useStore} from "vuex";
const store = useStore()
const user = computed(() => store.state.user)
return {
user
}