先定义好路由在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)
}
}
图片是告诉你们在哪个文件夹下面写的这些代码 这个虽然麻烦但是是用来学习基础的