Google material design web top app bar icon clicking is removed vue-router link?

Question

在此代码中

<!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>

我正在使用 Google material 设计（网络）topAppBar 和抽屉，加上 vue/vue-router。我想在抽屉中单击 link 时更改视图。

我发现当你打开抽屉点击name2所以link变为/#/bar，然后点击topappbar图标打开抽屉，link 消失了，它变成了 /.

我该如何解决这个问题？

谢谢

Answer 1

首先，在你的 html 上建立一个字符集，因为这可能会给你带来更大的麻烦，尤其是当你升级它时，请注意你的 B 组件 (Ln 33):

<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>

我刚刚删除了 'href="#"'，一切都恢复正常了。我真的不知道你是否以正确的方式将 material.io 与 VueJS 一起使用 and/or 如果有的话。有 material 个对 Vue 更友好的框架。请记住，如果您使用第三方 'techs' 在 Vue 范围之外操作 DOM 将会有麻烦。

Google material design web top app bar icon clicking is removed vue-router link?

Google material design web top app bar icon clicking is removing vue-router link?

javascript

vue.js

material-design

vue-router