实现一个简单的Vue前端路由

使用的技术：Vue动态组件和onhashchange事件。

    <div id="test">
        <div class="nav">
            <a href="#/index">首页</a>
            <a href="#/news">新闻</a>
            <a href="#/images">图片</a>
            <a href="#/videos">视频</a>
            <a href="#/map">地图</a>
        </div>
        <component :is="current"></component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let v = new Vue({
            el: '#test',
            data: {
                current: 'index'
            },
            components: {
                index: {
                    template: '<div>这是首页内容</div>'
                },
                news: {
                    template: '<div>这是新闻内容</div>'
                },
                images: {
                    template: '<div>这是图片内容</div>'
                },
                videos: {
                    template: '<div>这是视频内容</div>'
                },
                map: {
                    template: '<div>这是地图内容</div>'
                }
            }
        });
        window.onhashchange = function () {
            // console.log(location.hash);
            // console.log(location.hash.slice(2));
            v.current = location.hash.slice(2);
        };

    </script>

注： 上面是个简单的例子，只是为了说明问题仅供参考，不做开发使用！