vue.js twitter の screen_name で routing

見栄えよく
https://twikon.club/helpee_club/
って感じでアクセスしたらマイページを表示するようにしたい。

ルーティングの設定とスクリーンネームの取得方法を紹介しよう

app.js

    const routes = [
        {
            path: "/sample",
            component: Sample
        },
        //これが大事
        { path: '/:screen_name(.*)', component: NotFound }
    ];

URLの末尾にスラッシュが付く場合があるので削除してから取得

NotFound.vue

<template>
    <div>
        私のスクリーンネームは {{this.getScreenName}} です
    </div>
</template>

<script>
    export default {
        computed: {
            getScreenName() {
                return this.$route.params['screen_name'].replace('/','');
            },
        },
        created(){
            alert(this.getScreenName);
        },
    }
</script>

OK