vue-router

vue-router のナビゲーションガードによる昔の twitter like な modal の実装

updated: 2020/10/16 環境: vue@2.6.12 vuex@3.5.1 vue-router@3.4.6 Goal: あるユーザーのポストにダイレクトにアクセス時、 modal を閉じると当該ユーザーのプロフィールページに移行。 また、タイムラインからあるユーザーのポストにアクセス時、 modal …

vue-router In-Component Guards

vue-router@3.0.6 beforeRouterEnter(to, from, next) { next(vm => { console.log(vm) vm <<<< router-viewを使っている場合、最終的にrouter-viewで表示されるcomponentのインスタンス }) 従って、router-view と In-Component Guardsを使えば別のcomponen…

VueJS Routing に何らかのパラメータをつけたい

vue-router の meta が便利 これで $route.meta.profile に値が付くので v-if="this.$route.meta.profile" 等でブラウザバックにも対応した routing ごとの conditional rendering ができて便利 //

vue-router with dynamic router-link

vue-routerのrouter-linkを使ってdynamicなlinkの生成 方法① @app.js const routes = [ { path: '/user/:userName', component: Profile, children: [ { path: '', component: Activity, }, { path: 'follow', component: Follows }, { path: 'activity', co…

VueJS within Laravel dynamic image binding @nested route

hoge.vue <img :src='user.avatar' > <script> export default { computed: { user() { return this.$store.state.user.user; } }, 上記でdynamicにimageを切り替えられるが、 サブドメインのrouteを定義した場合、 vue-router経由で該当ページまで表示させた場合とページのリロードで表示させ…

Laravel + vue-router vue SPAページのRouting @vueJS inside Laravel

基本 app.jsで記述したpathをlaravel側のweb.phpにも記述。その際、returnするviewはvueの起点ページにする。 Route::get('/profile', function() { return view('home'); }); → home.blade.phpにvue componentのprofileがある場合、profileがレンダリングさ…