Recently, I worked on a project using vue-router. While the syntax in the initial code snippet may be a bit different due to my familiarity with writing in vue CLI, the process involves inserting the tag in App.vue within the main tag, setting up your router page, and configuring your router component.
If you're looking to get started, I suggest creating a new vue cli app.
To do so, open your terminal and run the following commands: vue create hello-world (include vue-router during the creation steps prompt), and then add vuetify by running vue add vuetify!
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74121b1a0034405a0c">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fefdedfce1eef1c8baa6f0">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<TopToolbar class="topTool"></TopToolbar>
<router-view></router-view>
<BottomNav class="bottomN"></BottomNav>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e686b7b5e2c3066">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfb9baaabba6a9b68ffde1b7">[email protected]</a>/dist/vuetify.js"></script>
<script>
import BottomNav from 'path';
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {TopToolbar, BottomNav},
data: () => ({
}),
})
</script>
</body>
</html>
<template>
<v-bottom-navigation
scroll-threshold="800"
absolute
color="primary"
light
grow
background-color="primary"
height="56"
>
<v-btn value="scan" :to="{ name: 'Scan'}">
<span v-if="this.$route.name != 'Scan'" style="color: #fff">Scan</span>
<v-icon v-if="this.$route.name != 'Scan'" size="24" color="#fff">mdi-barcode-scan</v-icon>
<v-icon v-else size="24" color="primary">mdi-barcode-scan</v-icon>
</v-btn>
<v-btn value="create" :to="{ path: '/'}">
<span v-if="this.$route.name != 'Create'" style="color: #fff">Create</span>
<v-icon v-if="this.$route.name != 'Create'" size="24" color="#fff">mdi-barcode</v-icon>
<v-icon v-else size="24" color="primary">mdi-barcode</v-icon>
</v-btn>
<v-btn value="print" :to="{ name: 'Print'}">
<span v-if="this.$route.name != 'Print'" style="color: #fff">Print</span>
<v-icon v-if="this.$route.name != 'Print'" size="24" color="#fff">mdi-printer</v-icon>
<v-icon v-else size="24" color="primary">mdi-printer</v-icon>
</v-btn>
</v-bottom-navigation>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({})
export default class BottomNav extends Vue {}
</script>
<style scoped>
</style>
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/scan',
name: 'Scan',
component: () => import('../views/Scan.vue'),
},
{
path: '/',
name: 'Create',
component: () => import('../views/Create.vue'),
},
{
path: '/print',
name: 'Print',
component: () => import('../views/Print.vue'),
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;