先定义好路由在router文件下面创建一个新的文件夹里面写上自己定义的路由
export default {
path: \'/detail/:id\',
component: () => import(\'@views/Detail/Detail\')
}
在主路由引入对应的模块路由
import detailRouter frpm \'./router/detail\'
// 网站所有的路由规则定义
const router = [
detailRouter,
{
path: \'/\',
redirect:\'/home\'
}
]
在视图中添加点击事件
<div @click="urlFn(item.ID)" v-for="item in List" :key="item.ID">
在methods方法中用编程式导航跳转
urlFn(id){
this.$router.path({name:\'detail\',params:{id}})
}
在页面中根据不同id获取不同信息 先定义url地址
export const detailUrl = \'getaway?k=1232321&id=\'
在请求头中添加信息以区别
import {detailUrl} from \'../../config/url\'
export const detailData = {id = 1} => {
return http.get(detailUrl + id, {
headers:{
// 由于请求头信息中不同的需求，所以要判断所用的条件
\'info\':\'info\'
}
})
}
在axios请求拦截器中判断
import axios from \'axios\'
import Vue from \'vue\'
axios.defaults.baseURL = \'/\'
axios.interceptors.response.use(function (config) {
if (config.headers.info == \'info\') {
config.header = {
\'X-Client-Info\':
\'{"a":"3000","ch":"1002","v":"5.0.4","e":"14355747577776456456456418","bc":"110102"}\',
"X-Host":"mall.film-ticket.film.info"
}
}
})
在页面中显示数据
import {detailData} from \'../../api/api\'
export default{
data(){
return {
id:0
}
},
async mounted(){
this.id = this.$router.params.id
let ret = await detailData(this.id)
}
}
图片是告诉你们在哪个文件夹下面写的这些代码 这个虽然麻烦但是是用来学习基础的