html单地址应用如何实现,基于Vue的简单的单页面应用的实现

最新推荐文章于 2023-10-11 11:11:37 发布

Emmamkq

最新推荐文章于 2023-10-11 11:11:37 发布

阅读量165

点赞数

文章标签： html单地址应用如何实现

本文基于vue1.x

基于vue2.x&webpack2.x请移步至

基于Vue的简单的单页面应用

在对Vue和webpack有了必定了解后，咱们就能够开始利用所了解的东西作一个简单的webapp了，不了解的同窗能够看下个人前两篇关于vue和webpack的基本应用：

webpack+vue起步

利用webpack和vue实现组件化vue

构建项目

首先建立各个组件，个人目录结构以下：webpack

//没有后缀名的都是文件夹

|-wechat

|-dist

|-src

| |-components //存放vue组件

| | |-tab //存放home.vue中的tab，动态切换的模板

| | | |-tab_1.vue

| | | |-tab_2.vue

| | |-home.vue //app的首页

| | |-list.vue //点击home中的连接跳转到

| | |-detail.vue //点击list中的连接跳转到

| |-app.vue //主要的vue文件(用于将各个组件的挂载)

| |-main.js //主要的js(用于配置路由)

|-static //存放静态资源

|-index.html

配置路由

首先在咱们的项目中安装vue-routergit

npm install vue-router

引入各个组件并配置路由：github

//main.js

import Vue from 'vue';

import VueRouter from 'vue-router';

//引入组件

import App from './app.vue';

import home from './components/home.vue';

import list from './components/list.vue';

import detail from './components/detail.vue';

Vue.use(VueRouter);

var app=Vue.extend(App);

var router=new VueRouter();

//配置路由

router.map({

'/home': {

component: home

'/list': {

component: list

'/detail': {

component: detail

}

});

//设置默认状况下打开的页面

router.redirect({

'/':'home'

});

router.start(app,'#app');

//暴露路由接口调试

window.router = router;

关于vue-router的介绍，官方文档介绍很清楚，地址：http://router.vuejs.org/zh-cn/index.html。

配置好路由后，须要将匹配好的组件正确的渲染到页面中，此时用到，它基于Vue的动态组件系统，因此它会继承一个正常动态组件的不少特性。在这里咱们用到两个：web

v-transition和transition-mode的完整支持，为了切换效果能正常工做，路由组件必须不是一个片断实例。vue-router

在路由的0.7.2+中支持keep-alive(关于keep-alive)npm

因此在app.vue写入：segmentfault

keep-alive

transition="fade"

transition-mode='out-in'>

打开命令行启动webpack-dev-server：

$ webpack-dev-server --inline --hot

此时咱们在页面中看到的页面就是home.vue

在home.vue中实现tab切换

tab切换做为一个常见的效果，出现的频率很高，那么如何用vuejs写一个tab切换效果呢？

利用当前被点击的tab是第几个，从而动态的切换相应的动态组件是vuejs实现切换的一种方式。动态组件的介绍以下：https://vuejs.org.cn/guide/components.html#动态组件。因此实现代码以下：

v-for="tab in tabs"
:class="{'weui_bar_item_on':$index===selected}"
@click="choose($index)">{{tab.tabName}}

import tab_1 from './tab/tab_1.vue';

import tab_2 from './tab/tab_2.vue';

export default{

data(){

return{

tabs:[

{tabName:'Vuejs'},

{tabName:'VueTab'}

selected:0,

currentView:'view_0'

}

components:{

'view_0':tab_1,

'view_1':tab_2

methods:{

choose(index) {

this.selected=index;

this.currentView='view_'+index;

}

两个动态组件为tab_1.vue和tab_2.vue。引入这两个模块，对外输出对组件的操做export default{}，在template模板中将动态组件加载进去，使用保留的元素，动态地绑定它的is特性，从而根据不一样的值动态的切换组件，在须要点击的tab导航上，须要v-for循环出两个导航，而后动态绑定class，根据当前点击的tab导航$index动态的切换class名:class="{'weui_bar_item_on':$index===selected}"，而后给li绑定click事件，从而让其在被点击时执行事件@click="choose($index)"。

因为默认状况下显示第一个组件且第一个tab变灰，因此在data设置默认值。为了切换有过渡，添加了transition="fade" transition-mode="out-in"并在css中设置动画的执行过程：

/*切换动画*/

.fade-transition {

transition: opacity 0.3s ease;

}

.fade-enter,

.fade-leave {

opacity: 0;

}

利用v-link实现路由连接

在组件中，用到了路由，在给a写路由连接时候要使用v-link而不是href。在带有v-link指令的元素，若是v-link对应的URL匹配当前路径，则该元素会被添加一个特定的class，默认为.v-link-active，这个默认值，咱们能够经过在建立路由时指定linkActiveClass全局选项来自定义，也能够经过activeClass内联选项来单独制定：

test

遇到的一些问题

1.v-for循环插入图片

在写循环插入图片的时候，写的代码以下：

%7B%7Bitem.image%7D%7D