router-view cannot be displayed in Vue

If you exist:

1. The code reports no error and runs successfully, but the content attached to the router in index.js cannot be displayed.
2. No writing mistakes, routes and components are not wrong,
3. Check in the browser, the corresponding <router-view> in App.vue is empty

Then I suggest you continue to read, first of all, the correct result:

//App.vue中
<template>
  <div id="app">
//关键是 router-view 能否成功渲染
    <router-view></router-view>

    <div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button>el-button</el-button>
    </div>

  </div>
</template>

<script>

export default {
  name: 'app',
  components: {

  }
}
</script>

//index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/main/HomeView.vue'
import Layout from '../views/LayoutView.vue'

Vue.use(VueRouter)

//1.这里是routes，指定路径和成员 
const routes = [
  {
    path: '/',
    name: 'Layout',
    
    //以下的 component（这是对的） 千万注意，不要写成 components（这是错的）
    component: Layout,
    children: [
      {
        path: '',
        name: 'Home',
        component: HomeView,
        meta: {
          isLogin: true
        }
      },
      {
        path: 'params',
        name: 'params',
        component: () => import('../views/main/ParamsView.vue'),
        meta: {
          isLogin: true
        }
      },
      {
        path: 'ad',
        name: 'ADclassify',
        component: () => import('../views/main/ADClassify.vue'),
        meta: {
          isLogin: true
        }
      },
      {
        path: 'product',
        name: 'product',
        component: () => import('../views/main/ProductView.vue'),
        meta: {
          isLogin: true
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/LoginView.vue'),
    meta: {
      isLogin: true
    }
  }
]
//2.这里是router,是一个VueRouter对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
//3.这里是routes,对应1中指定的内容
})

export default router

Above, if there is no problem, you can see

 The corresponding <router-view> in App.vue has value

Later I imported a js file in main.js

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import './assets/css/common.css'

//导入了这个文件，之后就看不见 router-view 渲染的内容了
// import './router/permission.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Here, now I still don't know why permission.js causes router-view not to render

//permission.js
import router from './index'

router.beforeEach((to, from, next) => {
  if (to.meta.isLogin) {
    const token = false
    if (token) {
      next()
    } else {
      next({
        name: 'Login'
      })
    }
  } else {
    next()
  }
})

In general : the failure of router-view in Vue to display may be caused by importing some inappropriate files