Vue（路由）5.queryString

vue-router

示例代码

src2（传入升序asc或者降序desc进行排序）

<template>
    <div class="home">
        <h2>商品列表</h2>

        <select v-model="sort">
            <option value="desc">从高到低</option>
            <option value="asc">从低到高</option>
        </select>

        <ul class="item-list">
            <li class="head">
                <span>名称</span>
                <span>价格</span>
                <span>操作</span>
            </li>
            <li v-for="item of items" :key="item.id">
                <span>
                    <router-link :to="{name: 'Item', params: {itemId: item.id}}">
                        {{item.name}}
                    </router-link>
                </span>
                <span>
                    {{item.price|RMB}}
                </span>
                <span>
                    <button>添加到购物车</button>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>

    import axios from 'axios';
    import RMB from '@/filters/RMB';

    export default {
        name: 'Home',

        data() {
            return {
                items: [],
                sort: 'desc'
            }
        },

        filters: {
            RMB
        },

        watch: {
            sort() {//监听数据sort，当sort发生变化时，调用方法getItems()发起请求
                this.getItems();
            }
        },

        async created() {
            this.getItems();
        },

        methods: {
            async getItems() {
                let rs = await axios({
                    url: 'http://localhost:8081/api/items',
                    params: {
                        sort: this.sort
                    }
                });
                this.items = rs.data;
            }
        }
    }

</script>

<style>
    ul {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .item-list li {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px dotted #333;
    }
    .item-list li.head {
        font-weight: bold;
    }
    .item-list li span {
        min-width: 200px;
    }
</style>

但是注意！使用watch监听可以，但是不能使用计算属性，因为计算属性不能处理异步！！

src3(新增需求使得分享url的时候可以保存排序状态)

<template>
    <div class="home">
        <h2>商品列表</h2>

        <select :value="sort" @change="goto">
            <!-- 将v-model改成v-bind也可以，绑定@change事件 -->
            <option value="desc">从高到低</option>
            <option value="asc">从低到高</option>
        </select>

        <ul class="item-list">
            <li class="head">
                <span>名称</span>
                <span>价格</span>
                <span>操作</span>
            </li>
            <li v-for="item of items" :key="item.id">
                <span>
                    <router-link :to="{name: 'Item', params: {itemId: item.id}}">
                        {{item.name}}
                    </router-link>
                </span>
                <span>
                    {{item.price|RMB}}
                </span>
                <span>
                    <button>添加到购物车</button>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>

    import axios from 'axios';
    import RMB from '@/filters/RMB';

    export default {
        name: 'Home',

        data() {
            return {
                items: [],
                sort: 'desc'
            }
        },

        filters: {
            RMB
        },

        async created() {
            this.getItems();
        },

        watch: {
            $route(to, from) {
                // console.log('路由变化了', to, from);
                this.getItems();
            }
        },

        methods: {
            async getItems() {
                this.sort = this.$route.query.s || 'desc';
                let rs = await axios({
                    url: 'http://localhost:8081/api/items',
                    params: {
                        sort: this.sort
                    }
                });
                this.items = rs.data;
            },

            goto({target}) {
                // console.log(target.value);
                // 当url切换（路由切换）的时候，如果使用的同一个组件，就会复用该组件（不会销毁）
                this.$router.push({
                    name: 'Home',
                    query: {
                        s: target.value
                    }
                });
            }
        }
    }

</script>

<style>
    ul {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .item-list li {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px dotted #333;
    }
    .item-list li.head {
        font-weight: bold;
    }
    .item-list li span {
        min-width: 200px;
    }
</style>

queryString

有的时候，我们可能也会用到 queryString

<select v-model="sort">
  <option value="desc">从高到低</option>
  <option value="asc">从低到高</option>
</select>

$route.query

我们可以通过路由对象 $route 的 query 属性来获取 queryString

...
computed: {
	sort: {
		get() {
      return this.$route.query.sort || 'desc';
    }
	}
}
...

加上||'desc’是为了防止传入undefined，使默认desc

编程式导航

有的时候，我们可能需要用到编程的方式来导航（跳转），而不是点击链接。如：当 sort 发生改变的时候跳转

...
computed: {
	sort: {
		get() {
      return this.$route.query.sort || 'desc';
    },
		set(newVal) {
			this.$router.push({
        name: 'home',
        query: {
          sort: newVal
        }
      });
		}
	}
}
...

路由组件的复用

为了提高性能，增强路由组件的复用，当路由切换使用的是同一个组件的时候，则会复用该路由组件，而不是销毁重建，这个时候，我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化

watch

如果切换的路由复用了组件，这个时候，我们可以使用 watch 监听 $route

watch: {
  $route(to, from) {
      console.log('$route');
  }
}

• to : 改变之后的 $route 对象
• from : 改变之前的 $route 对象

但是我们可以使用 vue-router 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑