How to open new window with vvuetify v-icon vue router? - vuetify.js

Question

I am trying to open a new page but it cannot. When I click on my home icon, it opens my home page and when click on dashboard it says
dashboard 'app' has been removed, use '' instead.
VToolbar>
at src/components/Navbar.vue
at src/App.vue
App.vue
template>
<nav>
<v-toolbar flat app>
<v-app-bar-nav-icon class="grey--text" #click="drawer =! drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="text-uparcase grey--text">
<span class="font-weighted-light">Blue</span>
<span>Berry</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat color="grey">
<span>Home</span>
</v-btn>
</v-toolbar>
<v-navigation-drawer v-model="drawer" app class="indigo">
<v-list-item >
<v-list-item-content>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list
dense
nav
>
<v-list-item
v-for="item in items"
:key="item.title"
router:to="item.route"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
export default {
data() {
return {
drawer:false,
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard',route:'/' },
{ title: 'Photos', icon: 'mdi-image',route:'/photos'},
{ title: 'Home', icon: 'mdi-home' ,route:'/home'},
{ title: 'About', icon: 'mdi-help-box' ,route:'/about'}
],
right: null,
}
}
}
</script>

Answer 1

Try to nest every v-list items in a < router-link />
Like that
<router-link :to="{ name: item.title }">
<v-list-item>
...
</v-list-item>
</router-link>