Review of the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<router-link to="/" v-on:click.native="dclick">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">file_copy</span>
<span class="mdc-list-item__text">name1</span>
</router-link>
<router-link to="/bar" v-on:click.native="dclick">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">file_copy</span>
<span class="mdc-list-item__text">name2</span>
</router-link>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<div>
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">file_copy</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
<div class="mdc-top-app-bar--fixed-adjust">
<router-view></router-view>
</div>
</div>
</div>
</div>
<style>
body {
margin:0;
}
</style>
<script>
Vue.component('A', {
template : "<div>A</div>"
});
Vue.component('B', {
template : "<div>B</div>"
});
var vm = new Vue({
el: "#app",
router : new VueRouter({
routes : [
{ path: '/', component: Vue.component("A")},
{ path: '/bar', component: Vue.component("B")}
]
}),
data : {},
mounted : function() {
this.drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'))
var drawer = this.drawer;
var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector(".mdc-top-app-bar"));
topAppBar.setScrollTarget(document.querySelector(".mdc-top-app-bar").parentNode);
topAppBar.listen('MDCTopAppBar:nav', function (event) {
drawer.open = !drawer.open;
});
},
methods : {
dclick : function() {
this.drawer.open = !this.drawer.open;
}
}
});
</script>
</body>
</html>
I am implementing Google's Material Design Web components like topAppBar and Drawer along with Vue/Vue Router for changing views when links in the drawer are clicked.
An issue arises where clicking on name2 within the drawer to navigate to
/#/bar</code, then attempting to open the drawer by clicking the top app bar icon results in the link reverting back to <code>/Seeking guidance on resolving this challenge. Thank you!