<template>
    <div id="app">
        <DataSearch/>
        <keep-alive :exclude="exclude">
            <!--  通過key設置頁面刷新 規(guī)矩
                $route.fullPath 得到路由(包含帶?的參數)
            :key="$route.fullPath" 如果路由改變就刷新
                     -->
<!--            <router-view :key="$route.fullPath"></router-view>-->
            <router-view :key="$route.fullPath"></router-view>
        </keep-alive>
    </div>
</template>

<template>
    <div style="text-align: center;">
        <el-autocomplete
            class="input-with-select"
            style="width: 80%;"
            popper-class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="請輸入內容"
            value-key="value"
            @change="sousuo"
        >
<!--    使用 value-key 屬性，可以指定任意列作為顯示用的        -->

<!--     自定義模板       -->
<!--   比如多個顯示      -->
<!--            <template slot-scope="{ item }">-->
<!--                <div class="name">{{ item.value }}</div>-->
<!--                <span class="addr">{{ item.address }}</span>-->
<!--            </template>-->
            <el-button slot="append" icon="el-icon-search" @click="sousuo" >搜索</el-button>
        </el-autocomplete>
    </div>
</template>

<script>
    export default {
        name: 'DataSearch',
        data() {
            return {
                state: '',
                content: [],
                fullPath: '',
            };
        },

        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.loadAll();
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 調用 callback 返回建議列表的數據
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    // restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())如果元素存在列表中返回下標，否則返回-1
                    console.log(restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()));
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);  // 如果大于-1則代表有這個關鍵字
                };
            },

            loadAll() {
                // console.log(this.content);
                return this.content
            },
            sousuo(){
                this.$router.push({
                    path: '/zhongzhuan',
                    query: {state: this.state},

                });
            },
        }
    }
</script>

<template>
    <div id="app">
        <DataSearch/>
<!--       這里必須要通過 :exclude 設置 緩存黑名單 否則跳轉會出問題       -->
<!--      黑名單中要包含 中轉的 vue 名  和中轉后的 vue 名     -->
        <keep-alive :exclude="exclude">
            <!--  通過key設置頁面刷新 規(guī)矩
                $route.fullPath 得到路由(包含帶?的參數)
            :key="$route.fullPath" 如果路由改變就刷新
                     -->
<!--            <router-view :key="$route.fullPath"></router-view>-->
<!--            <router-view :key="$route.fullPath"></router-view>-->
<!--              這里設置或不設置 key 都可以                               -->
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    import DataSearch from './components/datasearch.vue'

    export default {
        name: 'App',
        components: {
            DataSearch
        },
        data() {
            return {
                exclude: ['datadisplay', 'zhongzhuan'],
            }
        },
    }
</script>

<template>
    <div></div>
</template>

<script>
    export default {
        // 用來中轉，避免路由不變時 頁面不刷新
        name: "zhongzhuan",

        created() {
            this.pushUrl()
        },
        methods: {
            getData(){
                return this.$route.query.state
            },
            pushUrl(){
                this.$router.push({
                    path: '/datadisplay',
                    query: {state: this.getData()},  // 傳遞參數，放在url?后面的
                })
            }
        },
    }
</script>

<template>
    <div>
        <p>content：{{ content }}</p>
    </div>
</template>

<script>
    export default {
        name: "datadisplay",
        data(){
            return {
                content: '123',
            }
        },

        created() {
            this.getData()
        },
        methods: {
            getData(){
                //this.$router 實際上就是全局路由對象任何頁面都可以調用 push(), go()等方法；
                // this.$route  表示當前正在用于跳轉的路由器對象，可以調用其name、path、query、params等屬性。
                // 應此需要接受路由參數時，要用this.$route，發(fā)送跳轉路由時要用this.$router
                console.log(this.$route);
                this.content = this.$route.query;
            }
        }
    }

</script>

<style scoped>

</style>