vue本页面调转本页面，地址会变化，但是页面没变化

Question

vue本页面的列表点击跳转本页面，地址会变化，但是页面没变化

 <div class="bt" >
        <li v-for="(lists, index) in $store.state.listNews" :key="index">
          <router-link class="inner" :to="{ path: '/words', query: {index} }">
            <div class="wrap_l">
              <p>{{ lists.title }}</p>
              <div class="boot">
                <span>{{ lists.src }}</span>
              </div>
            </div>
            <div class="wrap_r">
              <img :src="lists.pic" alt="loading…">
            </div>
          </router-link>
        </li>
      </div>

Answer 1

这是因为你跳转的是本页面，vue会默认复用你的组件，所以不会刷新。
正确的做法是监听路由变化，然后做响应的操作，获取数据等

watch: {
    $route: {
      handler(newName, oldName) {
        console.log('$route has changed');
      },
      deep: true
}

Answer 2

本页跳本页只是刷新了当前面页，如果你想对本页操作，可以用this.$route.query.参数来获取参数的值，再进行数据筛选和显示（例如修改v-for:"(lists,index) in 筛选方法名"）。