11:09 提问
vue.js 单页面应用如何整页替换
代码如下：
&router-view class="view"&
&router-link to="/first" replace="true"&跳转第一页&/router-link&
&router-link to="/second"&跳转第二页&/router-link&
&/router-view&
first 和second分别是两个组件，上面分别显示“第一页”和“第二页”，目前的效果是
就是说点击“跳转第一页”就如图显示，但是我想要的是完全替换掉页面，只显示“我是第一个子页面几个字”，hello app和跳转链接就不显示了，前端新手，请各位赐教
按赞数排序
其他相似问题vue构建单页面应用实战
作者：axl234
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了vue构建单页面应用实战，使用 SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验。
1. 为什么要 SPA？
SPA： 就是俗称的单页应用（Single Page Web Application）。
在移动端，特别是 hybrid 方式的H5应用中，性能问题一直是痛点。 使用 SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验。
2. 为什么选择 vue？
在选择 vue 之前，使用 reactjs 也做过一个小 Demo，虽然两者都是面向组件的开发思路，但是 reactjs 的全家桶方式，实在太过强势，而自己定义的 JSX 规范，揉和在 JS 的组件框架里，导致如果后期发生页面改版工作，工作量将会巨大。
vue 相对来说，就轻量的多，他的view层，还是原来的 dom 结构，除了一些自定义的 vue 指令作为自定义标签以外，只要学会写组件就可以了，学习成本也比较低。
3. 环境配置
初始化工程，需要 node 环境使用 npm 安装相应的依赖包。
先创建一个测试目录，在里面依次输入以下命令。
//初始化package.json
//安装vue的依赖
npm install vue --save
npm install vue-router --save
//安装webpack的开发依赖
npm install webpack --save-dev
//安装babel的ES6 Loader 的开发依赖
npm install babel --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
//安装html loacer 的开发依赖
npm install html-loader --save-dev
4. 目录结构
src 为开发目录，其中 components 为组件子目录，templates 为模板子目录。
dist 为构建出的文件目录。
index.html 为入口文件。
package.json 为项目描述文件，是刚才 npm init 所建立。
webpack.config.js 是 webpack 的构建配置文件
5. Webpack 配置
下面是 webpack 的配置文件，如何使用 webpack，请移步 webpack 的官网。
var webpack= require("webpack");
module.exports={
bundle:[ "./src/app.js"]
path:__dirname,
publicPath:"/",
filename:"dist/[name].js"
{test: /\.html$/, loaders: ['html']},
{test: /(\.js)$/, loader:["babel"] ,exclude:/node_modules/,
presets:["es2015"]
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
6. 入口文件
index.html
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Vue Router Demo&/title&
&div id="app"&
&router-view&&/router-view&
&script src="dist/bundle.js"&&/script&
其中 id 为 app 的 div 是页面容器，其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上。
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
Vue.config.debug =
Vue.config.delimiters = ['${', '}']; // 把默认的{{ }} 改成ES6的模板字符串 ${ }
Vue.config.devtools =
var App = Vue.extend({});
var router = new VueRouter({});
router.map(require('./routes'));
router.start(App, '#app');
router.go({"path":"/"});
这是 vue 路由的配置。 其中由于习惯问题，我把 vue 默认的{{ }} 改成了的 ${ } ,总感觉这样看模板，才顺眼一些。
module.exports = {
component: require('./components/index')
'/list': {
component: require('./components/list')
component: require('./components/notFound')
7. 第一个组件
components/index.js
module.exports = {
template: require('../templates/index.html'),
ready: function () {
templates/index.html
&h1&Index&/h1&
&p&Hello World Index!&/p&
执行 webpack 构建命令
浏览器中访问：
查看 bundle 源码：
发现 template 模板文件，已经被 webpack 打成字符串了。这其中，其实是 webpack 的 html-loader 起的作用
8. 组件之间跳转
修改刚才的 index 组件，增加一个跳转链接，不用 href 了，要用 vue 的指令 v-link。
&h1&Index&/h1&
&p&Hello World Index!&/p&
&p&&a v-link="{path:'/list'}" &List Page&/a&&/p&
添加 list 组件
components/list.js
module.exports = {
template: require('../templates/list.html'),
data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
ready: function () {
templates/list.html
&h1&List&/h1&
&p&Hello List Page!&/p&
&li v-for="(index,item) in items"&
${item.id} : ${item.name}
v-for 也是 vue 的默认指令，是用来循环数据列表的。
现在开始执行 webpack --watch 命令进行监听，这样就不用每次敲 webpack 命令了。只要开发者每次修改 js 点了保存，webpack 都会自动构建最新的 bundle 文件。
浏览器里试试看：
点击 List Page 跳转到 list 页
Bingo！ 单页面两个组件之间跳转切换成功！
9. 组件生命周期
修改 **componets/list.js **
module.exports = {
template: require('../templates/list.html'),
data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
//在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化
init:function(){
console.log("init..");
//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。
created:function(){
console.log("created..");
//在编译开始前调用。
beforeCompile:function(){
console.log("beforeCompile..");
//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
compiled:function(){
console.log("compiled..");
//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。
ready: function () {
console.log("ready..");
//在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。
attached:function(){
console.log("attached..");
//在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。
detached:function(){
console.log("detached..");
//在开始销毁实例时调用。此时实例仍然有功能。
beforeDestroy:function(){
console.log("beforeDestroy..");
//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，所有的子实例也已经被销毁。如果有离开过渡，destroyed 钩子在过渡完成之后调用。
destroyed:function(){
console.log("destroyed..");
在浏览器里执行了看看：
首次进入 List 页面的执行顺序如下：
此时点一下浏览器的后退，List Component 会被销毁，执行顺序如下：
这是官方的生命周期的图：
10. 父组件与子组件
在很多情况下，组件是有父子关系的，比如 list 列表组件有个子组件 item
components/item.js
module.exports = {
template: require('../templates/item.html'),
props:["id","name"],
ready: function () {
templates/item.html
&p&我是subitem： ${id} - ${name}&/p&
修改 list 组件，添加 item 的引用
components/list.js
//引用item组件
import item from "./item";
module.exports = {
template: require('../templates/list.html'),
data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
//定义item组件为子组件
components:{
"item":item
ready: function () {
templates/list.html
&h1&List&/h1&
&p&Hello List Page!&/p&
&li v-for="(index,item) in items"&
&!--使用item子组件，同时把id,name使用props传值给item子组件--&
&item v-bind:id="item.id" v-bind:name="item.name"&&/item&
浏览器里试试看：
子组件成功被调用了
11. 组件跳转传参
组件之间的跳转传参，也是一种非常常见的情况。下面为列表页，增加跳转到详情页的跳转，并传参 id 给详情页
修改路由 routes.js
module.exports = {
component: require('./components/index')
'/list': {
component: require('./components/list')
//增加详情页的跳转路由，并在路径上加上id传参，具名为name：show
'/show/:id': {
name:"show",
component: require('./components/show')
component: require('./components/notFound')
添加组件 show
components/show.js
module.exports = {
template: require('../templates/show.html'),
data:function(){
return {};
created:function(){
//获取params的参数ID
var id=this.$route.params.
//根据获取的参数ID，返回不同的data对象（真实业务中，这里应该是Ajax获取数据）
if (id==1){
this.$data={"id":id,"name":"hello111","age":24};
this.$data={"id":id,"name":"hello222","age":28};
ready: function () {
console.log(this.$data);
templates/show.html
&h1&Show&/h1&
&p&Hello show page!&/p&
&p&id:${id}&/p&
&p&name:${name}&/p&
&p&age:${age}&/p&
修改 templates/item.html
& 代码如下:
&p&我是subitem： &a v-link="{name:'show',params: { 'id': id } }"& ${id} : ${name}&/a& &/p&
这里 name:‘show' 表示具名路由路径，params 就是传参。
继续浏览器里点到详情页试试：
点击“hello11”，跳转到详情页：
传参逻辑成功。
12. 嵌套路由
仅有路由跳转是远远不够的，很多情况下，我们还有同一个页面上，多标签页的切换，在 vue 中，用嵌套路由，也可以非常方便的实现。
添加两个小组件
components/tab1.js
module.exports = {
template: "&p&Tab1 content&/p&"
components/tab2.js
module.exports = {
template: "&p&Tab2 content&/p&"
修改 components/index.js 组件，挂载这两个子组件
import tab1 from "./tab1";
import tab2 from "./tab2";
module.exports = {
template: require('../templates/index.html'),
components:{
"tab1":tab1,
"tab2":tab2
ready: function () {
在路由里加上子路由
module.exports = {
component: require('./components/index'),
subRoutes:{
component:require('./components/tab1')
component:require('./components/tab2')
'/list': {
component: require('./components/list')
'/show/:id': {
name:"show",
component: require('./components/show')
component: require('./components/notFound')
好了，在浏览器里试一下：
初始状态：
点了 tab1，tab2：
Tab 切换没问题，可是，初始状态显示是空的，能不能默认显示 Tab1 Content 呢？很简单，调整下路由就可以了：
module.exports = {
component: require('./components/index'),
subRoutes:{
//默认显示Tab1
component:require('./components/tab1')
component:require('./components/tab1')
component:require('./components/tab2')
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Vue.js先入个门看看_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Vue.js先入个门看看
&&使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单,先看看几个例子：
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩7页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢ASP.NET Web API 入门实战(3)--Vue.js创建单页应用 | GeekMonKey's Blog
前面两节内容我们介绍了如何构建基于ASP.NET Web API的REST风格的服务，虽然demo比较简单，，而且仅仅建了一张数据表，没有涉及较多多的数据表映射关系，但是对于初学者来说这样给入门提供了一个整体思路，先易后难，慢慢上手，毕竟知易行难。
今天这篇文章主要是在前面已经构建好Web API 服务的基础上，介绍下如何使用当下较火的Vue.js来解析Web API，编写一个小界面，完成从后端API到前端展示数据的一个整体demo。
什么是Vue.jsVue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，让编写动态的UI界面变得轻松简单。
Vue.js 特点
简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动： 自动追踪依赖的模板表达式和计算属性。
组件化： 用解耦、可复用的组件来构造界面。
轻量： ~24kb min+gzip，无依赖。
快速： 精确有效的异步批量 DOM 更新。
模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。
Vue.js 安装这里我们只介绍使用&script&标签引入，NPM安装和Bower安装小伙伴们可以参考网上的教程。1.引用方法一：直接下载并用 &script& 标签引入，Vue 会被注册为一个全局变量。Vue.js 官网下载地址：在我们的demo中引用如下：1 src="~/Scripts/vue.js"&&
2.引用方法二：使用其静态资源 CDN 库，在我们的demo中引用如下：1 src="/ajax/libs/vue/1.0.7/vue.min.js"&&
什么是vue-resourcevue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。
vue-resource特点vue-resource插件具有以下特点：
体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
支持主流的浏览器：和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
支持拦截器：拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
引入vue-resource同Vue.js的引用一样，有两种引入方法：1.引用方法一：在我们的demo中引用如下：1 src="~/Scripts/vue-resource.js"&&
2.引用方法二：使用其静态资源 CDN 库，在我们的demo中引用如下：1 src="/ajax/libs/vue-resource/0.1.17/vue-resource.js"&&
基本语法引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。1234567// 基于全局Vue对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);// 在一个Vue实例内使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, errorCallback);this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
上述的then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：1234567891011121314// 传统写法this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调}, function(response){
// 响应错误回调});// Lambda写法this.$http.get('/someUrl', [options]).then((response) =& {
// 响应成功回调}, (response) =& {
// 响应错误回调});
在本demo中使用第二种Lambda写法总是报语法错误，所以仍然采用的是传统写法
下面开始我们本demo前端界面构建的具体介绍。最终完成的效果如下图所示：
Views结构在WebAPIDemo项目的Views文件夹中，我们可以看到有Home文件夹、Shared文件夹、_ViewStart.cshtml文件，其中，Home文件夹放置网站主页文件，Shared文件夹放置模板文件，_ViewStart.cshtml进行初始化。
在demo中使用的前端框架是BootStrap，这里我们将使用Shared文件夹下的模板文件，因此我们在Home文件夹下的html代码只需要写body部分；当然了，如果你不想使用模板文件，需要引入如下代码：123@{
Layout =}
引入js文件我们本次demo做一个单页界面作为主页，因此需要在Home文件下的Index.cshtml进行代码的编写，现在我们把Index.cshtml下的代码清空。
首先引入js文件，这里我用CDN库的方式引入。需要注意的是引用版本问题，我发现这是一个大坑啊，引用版本不一样导致编译直接出错，所以大家可以采用下面的应用方法：12 src="/ajax/libs/vue/1.0.7/vue.min.js"&& src="/ajax/libs/vue-resource/0.1.17/vue-resource.js"&&
编写html代码在demo中我们实现的是取回Web API返回的值以表格的方式进行展示，同时能够进行添加和删除操作，具体实现的是StudentController.cs中的get、post、delete方法。代码如下：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 class="container"&
class="col-md-6 col-md-offset-3"&
&Vue.js demo&
class="table table-hover" v-cloak&
class="text-center"&姓名&
class="text-center"&学号&
class="text-center"&班级&
class="text-center"&电话&
class="text-center"&操作&
v-for="student in students "&
class="text-center"&{{student.Name}}&
class="text-center"&{{student.StuID}}&
class="text-center"&{{student.Class}}&
class="text-center"&{{student.Phone}}&
class="text-center"&
type="button" class="btn btn-danger" v-on:click="deleteStudent(student)"&删除&
&添加学生信息：{{ stu.Name }}&
v-show="stu.ID" class="form-group"&
type="text" v-model="stu.ID" disabled="disabled" /&
class="form-group"&
for=""&姓名&
type="text" class="form-control" v-model="stu.Name"&
class="form-group"&
for=""&学号&
type="text" class="form-control" v-model="stu.StuID"&
class="form-group"&
for=""&班级&
type="text" class="form-control" v-model="stu.Class"&
class="form-group"&
for=""&电话&
type="text" class="form-control" v-model="stu.Phone"&
class="btn btn-primary btn-block" v-on:click="createStudent(student)"&添加&
编写js代码vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。本demojs代码如下：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849&script&
Vue.http.options.emulateJSON = true;
var demo = new Vue({
el: '#app',
data: {
student: [{
name: 'ID',
isKey: true
}, {
name: 'Name'
}, {
name: 'StuID'
}, {
name: 'Class'
}, {
name: 'Phone'
students: [],
apiUrl: 'http://localhost:7874/api/students',
stu: {}
ready: function() {
this.getStudents()
methods: {
getStudents: function () {
this.$http.get(this.apiUrl, function (data) {
this.$set('students', data);
createStudent: function() {
var vm = this
vm.$http.post(vm.apiUrl, vm.stu)
.then(function(response) {
vm.$set('stu', {})
vm.getStudents()
deleteStudent: function(student){
var vm = this
vm.$http.delete(this.apiUrl + '/' + student.ID)
.then(function(response)
vm.getStudents()
})&/script&
ok,至此代码已经写完了，运行查看一下效果，可以实现我们所需的功能。
双向数据绑定最后我们简单说一下数据绑定，在上面的代码中，有如下代码：123456789&添加学生信息：{{ stu.Name }}& v-show="stu.ID" class="form-group"&
type="text" v-model="stu.ID" disabled="disabled" /&& class="form-group"&
for=""&姓名&
type="text" class="form-control" v-model="stu.Name"&&
使用v-model这个指令完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。以上实例中
会根据输入框 input(标签为“姓名”) 的改变而改变(v-model=”stu.Name”)。
ok,本入门系列暂且告一段落，大家多多参考网上大牛的博客，只有自己趟过的坑才会牢牢记住，知道自己如何避免踩到同样的坑。
ASP.NET Web API 入门实战系列：
本demo源码已上传到Github：
坚持原创技术分享，您的支持将鼓励我继续创作！
订阅我的博客
加我微信私聊