table of Contents
Routing configuration
The routing configuration is basically the same, but the following example needs to be introduced in the routing guard
import {
createWebHashHistory, createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import Layout from "../views/Layout/Layout.vue"
// 路由正常配置
{
path: '',
component: Layout,
children: [
{
path: '',
name: 'Home',
component: Home,
meta: {
title: "首页",
parentpath: '/'
}
},
{
path: '/',
redirect: '/home'
}, {
path: '/Strategy',
name: 'Strategy',
component: () => import('../views/Strategy/Strategy.vue'),
meta: {
title: "旅游攻略",
parentpath: '/Strategy'
}
}, {
path: '/hotel',
name: 'hotel',
component: () => import('../views/Hotel/Hotel.vue'),
meta: {
title: "酒店",
parentpath: '/hotel'
}
},],
},
//决定路由模式
const isPro: boolean = process.env.NODE_ENV === 'production'
const router = createRouter({
//history是路由模式
history: isPro ? createWebHashHistory(process.env.BASE_URL) : createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})
Package request
import {
message } from 'ant-design-vue' //按需引入（提示）
import axios, {
AxiosInstance, AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
import nprogress from 'nprogress' //请求进度条（动画效果）
import 'nprogress/nprogress.css'
const service: AxiosInstance = axios.create({
baseURL: '/api',
timeout: 10000
})
service.interceptors.request.use((config: AxiosRequestConfig): AxiosRequestConfig => {
nprogress.start()
return config
}, (err: AxiosError) => {
nprogress.done()
console.log(err)
return Promise.reject(err)
})
service.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
nprogress.done()
return res.data
}, (err: AxiosError) => {
nprogress.done()
if (err.response && err.response.status) {
let status = err.response.status
console.log(err.response, "7877789");
if (status === 400) {
//如果请求错误为400的话会有提示
message.error(err.response.data.message)
}
}
})
export default service
Package api
import service from './index' //引入封装的axios文件
const token = localStorage.getItem('token') //按需使用
export default {
//文章列表
articleList({
city }: {
city: number | string }) {
//没个参数都需要定义类型
if (city) {
return service.get(`posts?city=${
city}`) }
else {
return service.get(`posts`) }
},
//验证码
Accont({
tel }: {
tel: string | number }) {
return service.post(`captchas`, {
tel })
},
}
Define the received data type of axios
Define an axios.d.ts file in the src root directory, the content of which is as follows, which contains the data types of all the data obtained after the request
import * as axios from 'axios'
declare module 'axios' {
interface AxiosResponse<T> {
data?: T,
total?: number,
code?: string,
token?: string,
user?: any,
message?: string,
data?: object,
total?: number,
}
}
Use of Ant icon
The code in main.ts is as follows
import {
createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as Icons from '@ant-design/icons-vue'; //全局引入
const app = createApp(App);
app.use(store);
app.use(router).mount('#app');
app.use(Antd)
const icons: any = Icons;
for (let i in icons) {
//循环注册
app.component(i, icons[i]);
}
Note when using
import api from "../../http/api";
import {
Form } from "ant-design-vue/types/form/form";
import {
defineComponent,reactive,toRefs,SetupContext,onMounted} from "vue";
import {
message } from "ant-design-vue";
import {
useRoute, useRouter } from "vue-router";
interface Data {
//定义data中的数据类型
form: formitem;
SpecialAir: [];
addomg: additem[];
data: [];
data1: [];
}
onMounted(() => {
//同2.0中的mounted
});
let back = () => {
message.warning("目前暂不支持往返，请使用单程选票！");
};
Every event needs to be returned
return {
...toRefs(data),
back,
};
Jump route
import {
useRoute, useRouter } from "vue-router"; //先引入
let router = useRouter();
let buy = (item: any) => {
console.log(item);
router.push({
path: "/ticket",
query: {
item: JSON.stringify(item), //如果不是字符串类型的话需要转换一下
},
});
Jump routing (accept the value passed)
data.departCity = JSON.parse(route.query.item as string).departCity;
});
Get the content defined by meta in the route (usually used to set the sidebar)
<a-menu id="dddddd" v-model:selectedKeys="selectedKeys" theme="light">
<a-menu-item
v-for="item in $router.options.routes[0].children"
:key="item.path"
@click="goto(item.path)"
>
<component :is="item.meta.icon"></component>
<span>{
{
item.meta.title }}</span>
</a-menu-item>
</a-menu>
import {
useRoute, useRouter } from "vue-router";
setup(props, ctx: SetupContext) {
let router = useRouter();
return {
...toRefs(data),
goto,
};
}
Calculated attributes
let userinfow = computed(() => {
return store.state.userinfo; //vuex中的数据
});
Dynamic binding class
<div
class="left"
:class="{shine:$route.meta.parentpath===item.path}" //shine为类名
v-for="(item,index) in top "
:key="index"
@click="goto(item)"
>{
{
item.name}}</div>
Dynamic binding style
<div:style="`background: url(${item.url}) center center no-repeat`"></div>
Use vuex
import {
useStore } from "vuex"; //引入
let store = useStore(); //创建实例
let registeredall = () => {
api
.registered()
.then((res: Res) => {
if (res.token) {
store.commit("setuserinfo", res.user); //调用vuex中的方法去改变数据
}
})
.catch((err: any) => {
console.log(err);
});
};
vuex
import {
createStore } from 'vuex'
export default createStore({
state: {
userinfo: null || JSON.parse(localStorage.getItem('user')!)
},
mutations: {
setuserinfo(state, data) {
state.userinfo = data
}
},
actions: {
},
modules: {
}
})
Register subcomponent
<template>
<Top></Top>
<Bottom></Bottom>
</template>
import Top from "../../components/layout/Top.vue";
import Bottom from "../../components/layout/Bottom.vue";
<script lang='ts'>
export default defineComponent({
components: {
Top,
Bottom,
},
Validate with ref form
<a-form
name="custom-validation"
style="margin-top: 20px"
ref="shin"
:model="ruleForm"
:rules="rules"
>
<a-form-item
required
label="姓名"
name="checkPass"
style="display: flex; width: 80%"
>
<a-input
v-model:value="ruleForm.checkPass"
style="margin-right: 0px; width: 125%; margin-top: 15px"
autocomplete="off"
/>
</a-form-item>
</a-form>
import {
Form } from "ant-design-vue/types/form/form";
setup(props, ctx: SetupContext) {
let shin = ref<Form | null>(null); //shin为ref的名字 创建实例
let info = () => {
shin.value!.validate().then((res: any) => {
//当表单验证成功时才会执行后面then中代码
router.push("/");
});
};
}