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

时间：2021-01-08 22:40:55 阅读：90 评论：0 收藏：0 [点我收藏+]

先定义好路由在router文件下面创建一个新的文件夹里面写上自己定义的路由

export default {

path: ‘/detail/:id‘,

component: () => import(‘@views/Detail/Detail‘)

}

在主路由引入对应的模块路由

import detailRouter frpm ‘./router/detail‘

// 网站所有的路由规则定义

const router = [

detailRouter,

{

path: ‘/‘,

redirect:‘/home‘

}

]

技术分享图片

在视图中添加点击事件

在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)

}

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

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

原文：https://www.cnblogs.com/ht955/p/14252981.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

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

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