[Vue Rewrite] Start More Routes

src/App.vue

@@ -2,7 +2,7 @@
 	<NcContent app-name="news">
 		<Sidebar />
 		<NcAppContent>
-			<router-view />
+			<RouterView />
 		</NcAppContent>
 	</NcContent>
 </template>

src/components/Sidebar.vue

@@ -27,7 +27,7 @@
 					</ActionButton>
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred">
+			<NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
 				<template #counter>
 					<NcCounterBubble>35</NcCounterBubble>
 				</template>
@@ -118,7 +118,7 @@
 
 			<NcAppNavigationItem :title="t('news', 'Explore')"
 				icon="icon-link"
-				:to="{ name: 'explore' }">
+				:to="{ name: ROUTES.EXPLORE }">
 				<template #counter>
 					<NcCounterBubble>35</NcCounterBubble>
 				</template>
@@ -140,7 +140,7 @@ import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
-// import { ROUTES } from '../routes.js'
+import { ROUTES } from '../routes'
 import { ACTIONS, AppState } from '../store'
 
 import AddFeed from './AddFeed.vue'
@@ -174,7 +174,7 @@ export default Vue.extend({
 	data: () => {
 		return {
 			showAddFeed: false,
-			// ROUTES
+			ROUTES,
 		}
 	},
 	computed: {

src/components/Starred.vue

@@ -0,0 +1,25 @@
+<template>
+	<div id="starred">
+		Starred Items Here
+	</div>
+</template>
+
+<script>
+// import axios from "@nextcloud/axios";
+// import { generateUrl } from "@nextcloud/router";
+export default {
+	components: {
+	},
+	props: {
+
+	},
+	created() {
+		// this.fetchStarred();
+	},
+	methods: {
+		async fetchStarred() {
+			// TODO
+		},
+	},
+}
+</script>

src/main.js

@@ -1,11 +1,10 @@
 
 import Vue from 'vue'
-import App from './App.vue'
 import VueRouter from 'vue-router'
-import Explore from './components/Explore.vue'
-import { generateUrl } from '@nextcloud/router'
 import Vuex, { Store } from 'vuex'
 
+import App from './App.vue'
+import router from './routes'
 import mainStore from './store'
 
 import { Tooltip } from '@nextcloud/vue'
@@ -20,20 +19,6 @@ Vue.use(VueRouter)
 
 Vue.directive('tooltip', Tooltip)
 
-const routes = [
-	{
-		name: 'explore',
-		path: '#explore',
-		component: Explore,
-	},
-]
-
-const router = new VueRouter({
-	mode: 'history',
-	base: generateUrl('apps/news'),
-	routes,
-})
-
 const store = new Store(mainStore)
 
 export default new Vue({

src/routes/index.ts

@@ -0,0 +1,41 @@
+import VueRouter from 'vue-router'
+
+import ExplorePanel from '../components/Explore.vue'
+import StarredPanel from '../components/Starred.vue'
+
+export const ROUTES = {
+	EXPLORE: 'explore',
+	STARRED: 'starred',
+}
+
+const getInitialRoute = function() {
+	// TODO: Fetch Recent route from Browser Session?
+	return ROUTES.EXPLORE
+}
+
+const routes = [
+	// using
+	// { path: '/collections/all', component: CollectionGeneral, alias: '/' },
+	// instead of
+	{ path: '/', redirect: getInitialRoute() },
+	// would also be an option, but it currently does not work
+	// reliably with router-link due to
+	// https://github.com/vuejs/vue-router/issues/419
+	{
+		name: ROUTES.EXPLORE,
+		path: '/explore',
+		component: ExplorePanel,
+		props: true,
+	},
+	{
+		name: ROUTES.STARRED,
+		path: '/starred',
+		component: StarredPanel,
+		props: true,
+	},
+]
+
+export default new VueRouter({
+	linkActiveClass: 'active',
+	routes, // short for `routes: routes`
+})