preface

This.$router.push(‘login’) is used in the login page, and the route of push will not enter your records.

Need: Click on the properties of the current navigation page from the menu on the left

Let’s take a look at the vue-Router documentation

Navigational programming

Router.push () // adds a new record router.replace() // does not add a new record to thehistoryAdd a new record router.go(n) // How many steps forward or backwardCopy the code

There is obviously no API to refresh the current page, this problem has been solved by the big guys, is TagsView, interested can see the implementation method

Reference to the big guy’s ideas. Click on the left navigation bar to refresh the current page

Train of thought

Obviously, there is no API for single-page apps to jump to themselves, so we need to jump to the middle page

  1. Create an intermediate pageredirect
  2. Refresh itself should not be added to the browser history, so userouter.replace()And carries the routing path of the current page
  3. In the middle of the pagecreatedFunction to get the parameter routing path carried, and againrouter.replace()The page is refreshed

Because of the vue-admin-template used here, you need to make some changes to the sidebar

src\views\layout\components\Sidebar\SidebarItem.vue

<template>/ /...<app-link :to="resolvePath(onlyOneChild.path)">
        <el-menu-item
          :index="resolvePath(onlyOneChild.path)"
          :class="{ 'submenu-title-noDropdown': ! isNest }"
          @click="reload(item)"// Add click method >
          <item :meta="Object.assign({}, item.meta, onlyOneChild.meta)" />
        </el-menu-item>
      </app-link>
    </template>/ /...</template>

<script>
export default {
  methods: {
   // ...
    // Click reload
    reload(item) {
      // If the current route is found to be the same as the clicked route, it carries the route path to the redirect page
      if (this.$route.name === item.name) {
        this.$nextTick((a)= > {
          // Params will be parsed to the path field by default, or to % if it is parsed as an argument
          this.$router.replace({
            path: '/redirect' + this.$route.fullPath,
          })
        })
      }
    }
  }}
</script>

Copy the code

Create a transfer page

src\views\redirect\index.vue

<script>
export default {
  created() {
    console.log(this.$route);
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function (h) {
    return h() // avoid warning message
  }
}
</script>
Copy the code

Configure the routing

{
    path: '/redirect'.component: Layout,
    name: 'redirect'.hidden: true.children: [{path: '/redirect/:path*'.// Path is the default name wildcard * must exist otherwise 404
        component: (a)= > import('@/views/redirect/index')}}]Copy the code

Implementation effect

Demo has been deployed to Github, the project address vue-elements-Asynclogin, if it will help you, please don’t save your start~~😄