在静态页面中使用 Vue.js

更新日期: 2019-08-13阅读: 2.3k标签: 页面

不使用Node.js, npmwebpack 等, 在静态页中使用vue.js. 包括路由, 单文件组件. 


1. 创建index.html

index.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script.
这里使用element-ui的导航菜单组件搭建了一个页面框架.

需要注意的是, <el-menu> 标签要加上 :default-active="$route.path" 和 @select="handleSelect"; 有了这两个属性才能实现路由的跳转.

在菜单项<el-meun-item>标签中要加上index="menu-2-index"属性, 意思就是当前菜单对应的路由.

最后不要忘记"<router-view></router-view>". Vue 组件将会被填充的这里.

script主要引用的有vue和vue-router以及element-ui, ajax请求使用的是axios, 如果不喜欢可以更换为jquery等.

<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1']" :default-active="$route.path" @select="handleSelect">
                    <el-menu-item index="">
                        <template slot="title"><i></i>菜单1</template>
                    </el-menu-item>
                    <el-menu-item index="/menu-2-index">
                        <template slot="title"><i></i>菜单2</template>
                    </el-menu-item>
                    <el-menu-item index="/menu-3-index">
                        <template slot="title"><i></i>菜单3</template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <router-view></router-view>
            </el-container>
        </el-container>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js "></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/util.js"></script>
    <script src="./js/route.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>


2. 创建单文件组件

单文件组件格式与 Vue 官网实例一致, HTML片段必须使用<template>标签包括.

<template>
    <div id="menu1">
        <h1>Hello Menu 1</h1>
        <h2>{{message}}</h2>
    </div>
</template>

<script>
    exports = {
        data: function () {
            return {
                message: 'Hello Vue!'
            }
        }
    }
</script>

<style>
    #menu1 {
        font-size: 12px;
    }
</style>


3. 定义路由配置

组件的加载使用异步方式, util.loadComponent(url), 此方法中传入服务器url, 接收服务器返回的单文件组件, 即HTML片段.

var routes = [{
    path: '/menu-1-index',
    name: 'menu-1-index',
    component: util.loadComponent('../views/menu1.html')
}, {
    path: '/menu-2-index',
    name: 'menu-2-index',
    component: util.loadComponent('./views/menu2.html')
}];

var router = new VueRouter({
    routes: routes
});


4. 定义main.js

在Vue实例中绑定路由, 并实现handleSelect方法, 用于路由的跳转.

var app = new Vue({
    el: '#app',
    router : router,
    data: function () {
        return {
            activeIndex:1,
        }
    },
    methods: {
        handleSelect : function(key, path) {
            console.log(key, path)
            this.$router.push(key)
        }
    }
});


链接: https://fly63.com/article/detial/4722

js禁止页面回退的方法(使浏览器后退按钮失效)

这篇文章主要为大家详细介绍js禁止页面回退的方法(使浏览器后退按钮失效),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

footer固定在页面底部的实现方法总结

footer固定在底部,footer保持在屏幕底部的四种方法实现:footer高度固定+绝对定位、footer高度固定+margin负值、footer高度任意+js、常用的纯css实现footer sticker

页面重定向的几种方法

html重定向就是通过各种的方法将各种网络请求重新定个方向转到其它位置。 在网站建设中,时常会遇到需要网页重定向的情况:像网站调整,如改变网页目录结构,网页被移到一个新地址

html页面实现返回上一页浏览位置

如果上一页是静态页面,可以用 history.go(-1)方法;页面采用了vue,页面每次加载都会去请求数据,用history.go(-1)方法返回上一页,上一页的页面因为重新请求数据,页面不会定位到上次浏览的位置;

js监听用户进入和离开当前页面

VisibilityChange 事件;用于用户是否离开当前页面;页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden ;监听 visibility change 事件;页面变为不可见时触发

Flutter 之页面切换(基本路由)

一个应用程序通常由多个页面组成,而统一管理页面之间跳转的机制通常被称为路由管理或导航管理,在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的

解决webapck多页面内存溢出

因为自己的项目是基于vue-cli3进行开发,所以这里只讨论这种情况下的解决办法 ,在进行多页面开发的时候,项目刚开始阶段,因为文件较少,所以代码编译速度还行,但是随着项目逐渐增大

JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面

假设parent为P页面,P页面有两个子页面,分别为B页面和C页面;B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面,现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容.

Flutter页面跳转传参

路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理

vue进入页面时不在顶部,检测滚动返回顶部按钮

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。监测浏览器滚动条滚动事件及滚动距离,一般给window绑定监测事件就能获得window.pageYOffset滚动距离。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!