Cant redirect to 404

[Andhika Satria Bagaskoro]

im trying too redirect any route to 404 but got no luck

const routes = [
  {
    path: "/",
    component: Frame,
    children: [
      ...RouterTabRoutes,
            {
        path: "admin/profile",
        name: "profile",
        component: importPage("Admin/Profile"),
        meta: {
          requireAuth: true,
          title: "Profil",
          icon: "fa fa-user-circle"
        }
      },
      {
        path: "/404",
        name: "NotFound",
        component: NotFound,
        meta: {
          title: "Not Found",
          icon: "fas fa-exclamation-triangle"
        }
      }
    ]
  },
  {
    path: "*",
    name: "*",
    redirect: { name: "NotFound" }
    // component: NotFound
  }
];

is there anything that i do wrong? thanks

[bhuh12]

I didn't see any wrong configuration in the code。
Can you fork router-tab-sample and reproduce the problem?

[Andhika Satria Bagaskoro]

ill try it

[Andhika Satria Bagaskoro]

<router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/page/1">Page 1</router-link>
      <router-link to="/page/2">Page 2</router-link>
      <div @click="goTo('About')">2nd About</div>

i add that div to App.vue, then this script

<script>
export default {
  methods: {
    goTo(payload) {
      let self = this
      self.$router.push({ name: payload })
    }
  }
}
</script>

and at console

what should i do with the code now? pull request or anyhting else?

oh yea, and i change something at vue router

import Vue from 'vue'
import VueRouter from 'vue-router'

// RouterTab 内置路由
import { RouterTabRoutes } from 'vue-router-tab'

// 引入布局框架组件
import Frame from '../components/layout/Frame.vue'

// 异步加载页面组件
const importPage = view => () =>
  import(/* webpackChunkName: "p-[request]" */ `../views/${view}.vue`)

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Frame,
    children: [
      // 引入 RouterTab 内置路由以支持 iframe 页签
      ...RouterTabRoutes,
      {
        path: '/', // 默认页和父级路由一致
        name: 'Home',
        component: importPage('Home'),
        meta: {
          title: 'Home' // 页签标题
        }
      },
      // {
      //   path: '/about',
      //   name: 'About',
      //   component: importPage('About'),
      //   meta: {
      //     title: 'About' // 页签标题
      //   }
      // },
      {
        path: '/page/:id',
        name: 'Page',
        component: importPage('Page'),
        meta: {
          key: 'path',
          title(route) {
            return `Page ${route.params.id}`
          }
        }
      },
      {
        path: '/404',
        name: 'NotFound',
        component: importPage('About'),
        meta: {
          title: 'Not Found',
          icon: 'fas fa-exclamation-triangle'
        }
      }
    ]
  },
  {
    path: '*',
    name: '*',
    redirect: '/404'
    // component: NotFound
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

[bhuh12]

When Vue router jumps the route by name, if it cannot match the route, it will directly throw a warning instead of redirecting to 404。

So you may need to jump the route in this way.

goTo(path) {
  this.$router.push(path)
}

[Andhika Satria Bagaskoro]

okay thanks, it fixed~~