基于Vue的简单的单页面应用
在对Vue和webpack有了一定了解后，我们就可以开始利用所了解的东西做一个简单的webapp了，不了解的同学可以看下我的前两篇关于vue和webpack的基本应用：
webpack+vue起步
利用webpack和vue实现组件化构建项目
首先创建各个组件，我的目录结构如下：
//没有后缀名的都是文件夹|-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-router
npm install vue-router
引入各个组件并配置路由：
//main.jsimport 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的动态组件系统，所以它会继承一个正常动态组件的很多特性。在这里我们用到两个：
v-transition和 transition-mode的完整支持，为了切换效果能正常工作，路由组件必须不是一个 片段实例。
在路由的0.7.2+中支持 keep-alive（ 关于keep-alive）
所以在app.vue写入：
查看更多关于基于Vue的简单的单页面应用的实现_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112465