html页面（钻取）携带参数跳转到另一个html页面

客官°小女子只卖身不卖艺 2023-05-28 15:45 128阅读 0赞

# 1. 跳转方式 #

1.  只能使用<a：href=" "></>方式
2.  不能使用ajax，ajax只是局部刷新，返回数据，不会参与页面跳转。

# 2. 携带参数定义和转码，跳转标签 #

#### 1. 携带参数 ####

*  一个钻取的字符串（keyWord），直接取
 *  一个查询条件（time），需先处理  
    在定义vue组件的同级定义一个变量，作为参数,可以用**window.time**取到

//钻取参数定义
    <script>
        var time;
    
        //主要内容
        var app = new Vue({ 
            el: "#app",
            components: { 
    
            },
    
    		data: { 
    			formInline: { 
                    time: dateSel,
                    useSituation: 'pushed',
                    moduleName: ''
                }
    		}，
    
            created() { 
            	//把初始的查询条件中时间值dateSel数组转成字符串，
            	//再转码，赋值给定义好的time
            	window.time = encodeURIComponent(dateSel.toString()
            );
            methods: { 
            	//每次查询time都重新赋值一次
    			onSubmit() { 
    			   window.time = encodeURIComponent(this.formInline.time.toString());
    			}
            ...
        })
     </script>

#### 2. <a ：href=" ">跳转 ####

*  拼一个url

'/api/knowledgeStatistics/keywordDrilling?keyWordName=' + scope.row.name + '&time=' + window.time

<el-table-column prop="name" label="关键词名称" align="center">
        <template slot-scope="scope">
            <a :href="'/api/knowledgeStatistics/keywordDrilling?keyWordName=' + scope.row.name + '&time=' + window.time ">
                <el-button @click="handle" type="text" size="small" >{
       {scope.row.name}}</el-button>
            </a>
        </template>
    </el-table-column>

*  效果![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]

# 3. 后端controller处理 #

*  不能直接**href**到另一个**html**界面，这样无法设置拦截器，会有后续的问题。只能走到后端通过**controller**跳转

@GetMapping(value = "/keywordDrilling")
    public String keywordDrilling(HttpServletRequest request) { 
    	return "knowledgeSearch";
    }

*  效果  
    ![在这里插入图片描述][20200316171100690.png]

# 4. 新html页面解析get请求中的参数 #

*  从**url**中提取参数转码成字符串，赋值给新页面的查询条件

mounted() { 
       //拿到钻取到的查询条件
        this.getFormInlineData();
    },
    methods: { 
        getFormInlineData(){ 
            var url = window.location.href;
            if(url.split("?").length > 1){ 
                //http://localhost:8080/api/knowledgeStatistics/keywordDrilling?keyWordName=%E8%88%AA%E7%8F%AD&time=2020-03-11%2C2020-03-11
                var keyWordName = decodeURIComponent(url.split("?")[1].split("&")[0].split("=")[1]);
                var time = decodeURIComponent(url.split("?")[1].split("&")[1].split("=")[1]).split(",");
                this.formInline.time = time;
                this.formInline.keyWord = keyWordName;
            }
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]: /images/20230528/23963a95a670433899e0ff937c28a10e.png
[20200316171100690.png]: /images/20230528/52c36ea1282d44de857dc6995e0ea6da.png