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

1. 跳转方式

1. 只能使用方式
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. 跳转

• 拼一个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>

• 效果

3. 后端controller处理

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

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

• 效果
  

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;
        }
	}
}