申し訳ありませんが、情報が足りないのでどなたも答えにくい状況だと思います。
step2のLaravel ユーザでログインして Vue画面を表示するまでは出来たのですが
(略)
ソースは記事のものをそのままコピーしています
おそらく、何かの書籍かどこかの Web サイトの手順の step2 までやったということですよね?
何を見ているのかの情報がないと、いったい何をやって、どのようなソースなのかが誰もわからないです。
また、ソースを載せるときにはコードブロックにしてもらえると見やすくなります。
特に、php のようなタグがあるコードだと、マークダウン内での HTML 記述と区別がつかなくて、表示されないので、意味が分かりません。
```php
<div id="app">
@can('admin')
<admin-component
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
></admin-component>
@else
<example-component
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
></example-component>
@endcan
</div>
```
のように、コードの前後を ``` などで囲ってください。
コードの前の ``` にコードの種類(たいていはファイルの拡張子と同じもので大丈夫です) をしていると、コードハイライトがされるので、よりわかりやすくなります。以下のような感じで表示されます。
<div id="app">
@can('admin')
<admin-component
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
></admin-component>
@else
<example-component
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
></example-component>
@endcan
</div>
コードハイライトのやりかたがわからない場合には、前後を ``` の行でくくるだけでも良いです。
画面がおかしい、ということであればスクリーンショットを貼り付けるなどすると、状況を理解しやすくなります。ファイルをアップロードするか、あるいは画像をコピーしてから、ここの入力画面でペーストすれば載せられると思います。
コードハイライトや、画像の貼り付け結果は、入力エリアの上部についている「プレビュー」を押せば見ることができます(再度編集する場合には「編集」を押してください)
まずは詳細情報を追記してもらえますか?
【追記】こんな感じかな
解決したいこと
以下の記事を参考に
step2のLaravel ユーザでログインして Vue画面を表示するまでは出来たのですがLaravel ユーザの権限によってvueコンポーネントを出しわけるについてでLogin画面は出ますがLogin後にExample component,Admin componentが表示されません。
ソースは記事のものをそのままコピーしています。
自分で試したこと
キャッシュが残っているのではないかと思い、 php artisan cache clearやphp artisan config clear
npm run devなどのコマンドを打ちますが特にエラーになりません。
dump-autoloadも試しました。
また、gate機能が機能していないのではないかと思い、home.balade.phpの
home.balade.php
<div id="app">
@can('admin')
<admin-component
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
></admin-component>
@else
<example-component
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
></example-component>
@endcan
</div>
部分を
<div id="app">
<example-compoment></example-component>
</div>
にしてみてnpm run devを掛けましたがやはり変わりなくlogin後ページが表示されません。
因みにstep2まではexample conponentが表示されていました。
loginとして試した内容は、,idがmaple_admin passwordがpassword(管理者)と idがmaple_user passwordがpassword(ユーザー)です。
記事と一点違うのは、MAMPを使っていますので/Applications/MAMP/htdocs/プロジェクトのルートを使っています。
migrateやseedは問題なく動いていて、データは登録できています。
自分で色々試しましたがこれ以上は無理そうなのでご教授頂ければ幸いに存じます。