При нажатии на значок верхней панели приложения в веб-дизайне материалов Google удаляется ссылка vue-router? - PullRequest
Новая
       8

При нажатии на значок верхней панели приложения в веб-дизайне материалов Google удаляется ссылка vue-router?

0 голосов
/ 29 октября 2018

В этом коде 

<!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 design design (web) topAppBar и Drawer, а также vue / vue-router. Я хочу изменить вид при нажатии на ссылки в ящике.

Я обнаружил, что когда вы открываете ящик и нажимаете name2, чтобы ссылка изменилась на /#/bar, затем щелкните значок верхней панели приложений, чтобы открыть ящик, ссылка исчезнет, ​​она просто станет /.

Как я могу исправить эту проблему?

Спасибо

1 Ответ

0 голосов
/ 29 октября 2018

Прежде всего, установите кодировку в вашем 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 и / или есть ли такой. Существуют материальные рамки более Vue-friendly. Помните, что если вы используете сторонних «техников» для манипулирования DOM вне области действия Vue, возникнут проблемы.

...