Routing cleanup and improvement (#227)

src/components/Channel.vue

@@ -40,13 +40,10 @@ export default {
     },
     methods: {
         async fetchChannel() {
-            const url =
-                Constants.BASE_URL +
-                (this.$route.params.channelId
-                    ? "/channels/" + this.$route.params.channelId
-                    : this.$route.params.channelC
-                    ? "/c/" + this.$route.params.channelC
-                    : "/user/" + this.$route.params.channelUser);
+            const url = 
+                Constants.BASE_URL + "/" 
+                + this.$route.params.path + "/" 
+                + this.$route.params.channelId
             return await this.fetchJson(url);
         },
         async getChannelData() {
@@ -60,7 +57,7 @@ export default {
             if (this.loading || !this.channel || !this.channel.nextpage) return;
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
                 this.loading = true;
-                this.fetchJson(Constants.BASE_URL + "/nextpage/channels/" + this.channel.id, {
+                this.fetchJson(Constants.BASE_URL + "/nextpage/channel/" + this.channel.id, {
                     nextpage: this.channel.nextpage,
                 }).then(json => {
                     this.channel.relatedStreams.concat(json.relatedStreams);

src/router/router.js

@@ -1,50 +1,11 @@
 import { createRouter, createWebHistory } from "vue-router";
 
 const routes = [
-    {
-        path: "/watch",
-        component: () => import("../components/WatchVideo.vue"),
-    },
-    {
-        path: "/watch/:v",
-        component: () => import("../components/WatchVideo.vue"),
-    },
-    {
-        path: "/embed/:v",
-        component: () => import("../components/WatchVideo.vue"),
-    },
-    {
-        path: "/w/:v",
-        component: () => import("../components/WatchVideo.vue"),
-    },
-    {
-        path: "/v/:v",
-        component: () => import("../components/WatchVideo.vue"),
-    },
-    {
-        path: "/shorts/:v",
-        component: () => import("../components/WatchVideo.vue"),
-    },
     {
         path: "/",
         name: "Trending",
         component: () => import("../components/TrendingPage.vue"),
     },
-    {
-        path: "/channel/:channelId",
-        name: "ChannelId",
-        component: () => import("../components/Channel.vue"),
-    },
-    {
-        path: "/c/:channelC",
-        name: "ChannelC",
-        component: () => import("../components/Channel.vue"),
-    },
-    {
-        path: "/user/:channelUser",
-        name: "ChannelUser",
-        component: () => import("../components/Channel.vue"),
-    },
     {
         path: "/preferences",
         name: "Preferences",
@@ -60,6 +21,14 @@ const routes = [
         name: "Playlist",
         component: () => import("../components/Playlist.vue"),
     },
+    {
+        path: "/:path(v|w|embed|shorts|watch)/:v?",
+        component: () => import("../components/WatchVideo.vue"),
+    },
+    {
+        path: "/:path(channel|user|c)/:channelId/:videos?",
+        component: () => import("../components/Channel.vue"),
+    },
 ];
 
 const router = createRouter({