列表添加文字超链接,将数据渲染到另一个页面

以下是我解决问题的知识点记录,参考了很多网上的知识。如有不正之处,请求斧正!
1.路由方面

	{
			
			path: '/plan',
			name: 'plan',
			component: Plan,
			meta: {
				title: '工作表'
			}
		},
		{
			
			path: '/plande',
			name: 'plande',
			component: Plande,
			meta: {
				title: '详情页'
			}
		},

2.携带文字链接的页面

  1. 渲染文字使之产生链接,使用.例如:
    此案例选的是数据库列表的名称:
    1)在计划名称里面放入插槽;
    2)放入文字链接;
    3)添加标签定义超链接,用于从一张页面链接到另一张页面。不用拘泥于别人定义好的例子,可以添加自己的想法。
    标签里面我通过添加一个点击事件来获取点击文字链接数据库位置的ID;
<el-table-column label="名称" prop="name" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-link type="primary">
							<a target="_self" class="buttonText" @click="goParam(scope.row.id)">{{scope.row.name}}</a>
                           <!-- scope.row是个作用域插槽 -->
						</el-link>
					</template>
				</el-table-column>

3.定义方法

methods: {
			//该方法通过传入id,携带链接的参数跳转到另一个页面显示
			goParam(id) {
				this.$router.push({
					name: 'plande',//要展示的详情页面的路由
					params:{
							id:id
       //params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中。具体的自行百度
					}	
				})
			}

4.需要展示的页面

methods: {
			// 根据id获取对应的数据
			async getPatrol() {
				// 请求数据
				const {
					data: res
				} = await this.$http.get(`patrol/${this.$route.params.id}`)
            //这里一定要使用this.$route.params.id;直接使用id会报错从而找不到数据
				if (res.code !== 200) {
					return this.$message.error('获取详情页失败!')
				}
				this.$message.success('获取详情页成功!')
				this.Scheme = res.data				
			}
		}

注意:使用params会造成刷新页面后数据丢失,后面换了参数query.改进后如下

列表页面:
goParam(id) {
				this.$router.push({
					name: 'plande',
					query : {
						id:id
					},
				})
			},
接收页面:
methods: {
			// 根据id获取对应的数据
			async getPatrol() {
				// 请求数据
				const {
					data: res
				} = await this.$http.get(`patrol/${this.$route.query .id}`)
            //这里一定要使用this.$route.params.id;直接使用id会报错从而找不到数据
				if (res.code !== 200) {
					return this.$message.error('获取详情页失败!')
				}
				this.Scheme = res.data				
			}
		}

你可能感兴趣的:(列表添加文字超链接,将数据渲染到另一个页面)