This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Before their own output, look at the source code analysis of the implementation of the permission, and then found that the official has a detailed explanation of this aspect, decided to check the leak fill the gap, look at the official is how to say.

First, in router/index.js, constantRouterMap defines pages that can be accessed without permissions. Then, when instantiating vue, only constantRouterMap is mounted.

export const constantRoutes = [
  {
    path: '/login'.component: () = > import('@/views/login/index'),
    hidden: true
      },
const createRouter = () = > new Router({
    // mode: 'history', // require service support
    scrollBehavior: () = > ({ y: 0 }),
    routes: constantRoutes
})
Copy the code

After obtaining the permission, you can mount asyncRoutes asynchronously so that users can access the corresponding route.

The official mentioned that 404 pages need to be mounted last, otherwise all pages will be blocked to 404, I did not do the test, chose to believe the author.

So that’s basically it, so let’s move on to something new.

The sidebar is highlighted

:default-active="$route.path"\
Copy the code

Click on the route in the sidebar to refresh the current page function. The Vue-Router intercepts the current route, determines that the URL has not changed, and does not trigger any hooks or views changes. But there are times when you really need a feature like this, so you can hack it. Change the QUERY of the URL to trigger the views change.

Listen for the click event in the sidebar and push a Query to routerPush each click to refresh the page. Ps. It seems that I can add this feature to my current project, but I will add it later.

clickLink(path) {
  this.$router.push({
    path,
    query: {
      t: +new Date(a)// Make sure the query item is different every time you click the route, and make sure the view is refreshed again}})}Copy the code

After the table, the original element-table is not used, nor is the element-admin table used. Because our company’s table data is generally large, and users do not like paging, so a table with tens of thousands of data often appears. In view of this situation, I started to do virtual scrolling to deal with the problem of data display, and then more and more functions were added. I found vxE-Table, which has many commonly used table functions. All the functions I thought I used. Is a great table component (as long as in this department, I will always love vxe-table)

Xuliangzhan_admin. Gitee. IO/vxe – table / #…

If you are interested in using vue-element-admin, you will add vxe-table, and maybe you will also learn vxe-table in the opening article