Vue-router演習

根本理解の為オフィシャルページの演習 1-1 はじめに

https://router.vuejs.org/ja/guide/

  • 目的は単にURL取り出し+-加工ボタン作成

さて、動作サンプルと同様コードのはずだが動かん。
wp要らんコードがあるチェックの為、素直なhtmlを別途あげてみる

  • auto改行を削除
  • home以下のコードを一旦削除

で動作を確認。 https://www.cokes.jp/lab/vue-router/xgrjzsup.html#/bar

でもって、本ページの改行を修復→ あれ?だめすね。
→ほぼ同様のcodeのはずが Uncaught ReferenceError: VueRouter is not definedと。 (ここで小休止後、色々やって正常動作へ)
見てみるとvue-router.jsがheadに無い。およ?wpのscripts n Stylesにhead elementって書いてあるのになぁ。 押し込んでも× さて、しょうがないのでcustom css&jsで試す →ok ソース上はheadでvue-routerが読まれている。しかし動作はしてない模様 →chromeで確認 →おや、先のReferenceErrorは解除されているがios consoleのerudaが干渉してるとな。 一度erudaを切ってテスト →ん、同様にcannot find #appだ? 調べてみると”htmlより先にvueのscript実行が来ちゃってるのでダメ”だそうで。。 https://www.imamura.biz/blog/vue/display_text まぁ実装条件に必要そうなので対処策のDOMContentLoadedを試行。 →いえい!動いた!のだがwp エディタ切替したら動作不良orz →ひえっ!エディタ行き来しただけでrouter-linkのタグが削除されてた!恐怖! 対処は。。あんまり無いみたいなのでビジュアルモード使用不可、で当座はしのぐ。

Hello App!




Go to Foo Go to Bar


  • 動作完了の後、体力が続かないので取合えずもくろみだけをli
  • 本文の読解
    • どーも「何しとん?」がピンとこないので自己翻訳してみる
  • 次の章へ進む
    • それはそれとして取合えずまぁまぁの長さのこいつを流して演習してみる
  • 本来の目的(urlの加減算)で見つけたurlへ浮気してみる