vue带有参数的路由跳转 动态路由

先定义好路由在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)

  }

}

图片是告诉你们在哪个文件夹下面写的这些代码 这个虽然麻烦但是是用来学习基础的