teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップVue.jsに関する質問Vue3でルーティングを切り分けるには？

編集履歴

回答編集履歴

6

変数がおかしかったので修正

2023/07/03 07:33

投稿

FKM
FKM

スコア3647

test CHANGED
@@ -47,12 +47,12 @@
47
47
  }
48
48
  ];
49
49
 
50
- const urouter = createRouter({
50
+ const router = createRouter({
51
51
  history: createWebHistory(),
52
52
  routes: routes
53
53
  })
54
54
  routes2.map((r,i)=>{
55
- urouter.addRoute(r) //addRouteで増やしていく
55
+ router.addRoute(r) //addRouteで増やしていく
56
56
  return r.fullPath //増やしたルートに対しパスを通す
57
57
  })
58
58
  //router.replace(urouter.currentRoute.value.fullpath) //今回はいらないかも？

5

変数を統一

2023/07/03 07:01

投稿

FKM
FKM

スコア3647

test CHANGED
@@ -55,7 +55,7 @@
55
55
  urouter.addRoute(r) //addRouteで増やしていく
56
56
  return r.fullPath //増やしたルートに対しパスを通す
57
57
  })
58
- //urouter.replace(urouter.currentRoute.value.fullpath)
58
+ //router.replace(urouter.currentRoute.value.fullpath) //今回はいらないかも？
59
59
 
60
60
  export default router
61
61
  ```

4

大幅に書き換えています

2023/07/03 06:57

投稿

FKM
FKM

スコア3647

test CHANGED
@@ -1,24 +1,75 @@
1
- 少しアレンジを加えて試してみたところ、createAppを複数作成しても対応できるようです。
1
+ 後日見直し。複数のidを置く方法はイレギュラーだったようなので、マニュアル通りに作ってみました。
2
2
 
3
- ```ts:main.ts
4
- import { createApp } from 'vue'
5
- import userApp from './userApp.vue'
6
- import AdminApp from './adminApp.vue'
7
- import userRouter from '../router/userRouter'
8
- import adminRouter from '../router/adminRouter'
3
+ 一度設定したルーターオブジェクトに対しaddRouteメソッドで追加していく方法が正しいようです。ただ、addRouteメソッドは単一のルーティングしか追加できないようなので、ループ文を使って順次増やしてみました（公式マニュアルを見ても一つ一つ増やしていく書き方だったので）。
9
4
 
5
+ vue-router公式（英文）
6
+ [Dynamic Routing](https://router.vuejs.org/guide/advanced/dynamic-routing.html)
7
+
8
+ ```router.ts
10
- createApp(userApp).use(userRouter).mount('#userapp')
9
+ import { createRouter, createWebHistory } from 'vue-router';
11
- createApp(AdminApp).use(adminRouter).mount('#adminapp')
10
+ import Login from '../user/Login.vue';
11
+ import Survey from '../user/Survey.vue';
12
+ import Signup from '../user/Singup.vue';
13
+ import AdminLogin from "../admin/AdminLogin.vue";
14
+ //import { checkAuth, checkExpiration } from '../controller/user';
15
+ import DashBoard from "../admin/DashBoard.vue";
16
+
17
+ //メインとなるルーター
18
+ const routes = [
19
+ {
20
+ path: "/",
21
+ component: Login
22
+ },
23
+ {
24
+ path: "/survey",
25
+ component: Survey.default,
26
+ },
27
+ {
28
+ path: "/signup",
29
+ component: Signup.default
30
+ }
31
+ ]
32
+
33
+ //追加したいadminルーター
34
+ const routes2 = [
35
+ {
36
+ path: "/admin",
37
+ name: "Admin",
38
+ component: AdminLogin,
39
+ },
40
+ {
41
+ path: "/admin/dashboard",
42
+ name: "/Dashboard",
43
+ component: DashBoard,
44
+ meta: {
45
+ requireAdmin: true, // 管理者は認証が必要
46
+ },
47
+ }
48
+ ];
49
+
50
+ const urouter = createRouter({
51
+ history: createWebHistory(),
52
+ routes: routes
53
+ })
54
+ routes2.map((r,i)=>{
55
+ urouter.addRoute(r) //addRouteで増やしていく
56
+ return r.fullPath //増やしたルートに対しパスを通す
57
+ })
58
+ //urouter.replace(urouter.currentRoute.value.fullpath)
59
+
60
+ export default router
12
61
  ```
13
62
 
63
+ ```main.ts
64
+ import { createApp } from 'vue'
14
- おそらくアプリケーションを構築するApp.vue上でルーティングがうまくつながっていない状態だと見受けられます。
65
+ import userApp from './user/userApp.vue'
66
+ import AdminApp from './admin/adminApp.vue'
67
+ import userRouter from './router/userRouter.ts'
15
68
 
16
- ```vue
17
- <router-view></router-view>
69
+ createApp(userApp).use(userRouter).mount('#app')
18
70
  ```
19
71
 
20
- をきちんと置いてますか？これをコメントアウトすると
72
+ 以下の方法は間違っていましたのでオミット
21
73
 
22
- **ue Router warn]: No match found for location with path "/"**
74
+ ~~少しアレンジを加えて試してみたところ、createAppを複数作成しても対応できるようです。おそらくアプリケーションを構築するApp.vue上でルーティングがうまくつながっていない状態だと見受けられます。~~
23
75
 
24
- という、質問通りのエラーが表示されました。

3

太字になっていなかったので

2023/04/20 06:20

投稿

FKM
FKM

スコア3647

test CHANGED
@@ -1,4 +1,4 @@
1
- 試してみたところ、createAppを複数作成しても対応できるようです。
1
+ 少しアレンジを加えて試してみたところ、createAppを複数作成しても対応できるようです。
2
2
 
3
3
  ```ts:main.ts
4
4
  import { createApp } from 'vue'
@@ -11,7 +11,6 @@
11
11
  createApp(AdminApp).use(adminRouter).mount('#adminapp')
12
12
  ```
13
13
 
14
-
15
14
  おそらくアプリケーションを構築するApp.vue上でルーティングがうまくつながっていない状態だと見受けられます。
16
15
 
17
16
  ```vue
@@ -20,6 +19,6 @@
20
19
 
21
20
  をきちんと置いてますか？これをコメントアウトすると
22
21
 
23
- **ue Router warn]: No match found for location with path "/"
22
+ **ue Router warn]: No match found for location with path "/"**
24
23
 
25
24
  という、質問通りのエラーが表示されました。

2

ルーティングが原因でしょう

2023/04/20 06:17

投稿

FKM
FKM

スコア3647

test CHANGED
@@ -11,22 +11,15 @@
11
11
  createApp(AdminApp).use(adminRouter).mount('#adminapp')
12
12
  ```
13
13
 
14
- ただ、それには条件があり、publicフォルダ直下のindex.htmlにきちんとidを付与してあげないと以下のエラーが出ます。
15
14
 
15
+ おそらくアプリケーションを構築するApp.vue上でルーティングがうまくつながっていない状態だと見受けられます。
16
+
16
- ```public/index.html
17
+ ```vue
17
- <body>
18
- <noscript>
19
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
20
- </noscript>
21
- <div id="userapp"></div>
18
+ <router-view></router-view>
22
- <div id="admiapp"></div><!-- わざとid名を合わないようにする -->
23
- <!-- built files will be auto injected -->
24
- </body>
25
19
  ```
26
20
 
27
- このようにしたところ、
21
+ をきちんと置いてますか？これをコメントアウトすると
28
22
 
29
- **e-router.mjs:35 [Vue Router warn]: No match found for location with path "/admin"
23
+ **ue Router warn]: No match found for location with path "/"
30
- w**
31
24
 
32
- 質問どおりのエラーが出たので、おそらくhtml上に対応のセレクタがないか、あるいはルーティングがつながっていない状態だと見受けられます。
25
+ という、質問通りのエラーが表示されました。

1

同じに合わせた

2023/04/20 06:09

投稿

FKM
FKM

スコア3647

test CHANGED
@@ -2,12 +2,12 @@
2
2
 
3
3
  ```ts:main.ts
4
4
  import { createApp } from 'vue'
5
- import urouter from './userApp.vue'
5
+ import userApp from './userApp.vue'
6
6
  import AdminApp from './adminApp.vue'
7
7
  import userRouter from '../router/userRouter'
8
8
  import adminRouter from '../router/adminRouter'
9
9
 
10
- createApp(urouter).use(userRouter).mount('#userapp')
10
+ createApp(userApp).use(userRouter).mount('#userapp')
11
11
  createApp(AdminApp).use(adminRouter).mount('#adminapp')
12
12
  ```
13
13