web-dev-qa-db-ja.com

vue-routerがデフォルトパスの問題にリダイレクトする

ユーザーがルートパスに移動したときに特定のページにデフォルト設定したい、つまり使用されたときにmyapp.comに移動したい場合はmyapp.com/defaultpageにリダイレクトしたい

私の現在のコードは

index.js

import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'

export default new Router({
  mode: 'history',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      redirect: '/defaultview',
      name: 'home',
      component: Full,
      children: [
        {
          path: '/defaultview',
          name: 'defaultview',
          component: DefaultView
        },
        {
          path: '*',
          component: NotFoundComponent
        }
    }
]})

ユーザーがmyapp.comにアクセスすると、「404ページが見つかりません」、つまりNotFoundComponentが表示されます。 myapp.com/defaultviewと入力した場合のみ、正しいページにアクセスできます。

何か案は？

vue.jsvuejs2vue-router
14
proximacentauri

子を使用する場合、親のURLプレフィックスを削除します

交換する "/defaultview"〜defaultviewは親パスコンポーネントを削除するため、実際のコードは次のようになります。

routes: [
{
  path: '/',
  redirect: '/defaultview',
  name: 'home',
  component: Full,
  children: [
    {
      path: 'defaultview', /* changed */
      name: 'defaultview',
      component: DefaultView
    },
    {
      path: '*',
      component: NotFoundComponent
    }
  ]
}

参照 ネストされたルート

5
Raj

このコードを試してください：

routes: [
    {
      path: '/',
      redirect: '/defaultview'
    },
    {
      path: '/defaultview',
      name: 'defaultview',
      component: DefaultView
    },
    {
      path: '*',
      component: NotFoundComponent
    }
]
22
Adriano Resende

1行のコードを使用して、つまりrouter.replace("myPath");を追加することで実行できます。完全なコード：

import Vue from "vue";
import Router from "vue-router";
import MyComponent from "./my-component";

Vue.use(Router);

const routes = [
  { path: "/myPath", name: "myPath", component: MyComponent }
];

const router = new Router({
  mode: "history", // Remove the hash from the URL, optional.
  routes
});

router.replace("myPath");

export default router;
0
Daniel Danielecki