Vue.js构建项目笔记2:vuejs+vue-router（vue.js router）

25-03-02 11

本文将带您了解关于Vue.js构建项目笔记2:vuejs+vue-router的新内容，同时我们还将为您解释vue.jsrouter的相关知识，另外，我们还将为您提供关于1、vuevue2.0vue-

本文将带您了解关于Vue.js构建项目笔记2:vuejs+vue-router的新内容，同时我们还将为您解释vue.js router的相关知识，另外，我们还将为您提供关于1、vue vue2.0 vue-cli vue-router webpack、vue+vue-router+axios+element-ui构建vue实战项目之七（渲染content.vue内容）、vue+vue-router+axios+element-ui构建vue实战项目之三（认识项目文件）、vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）的实用信息。

本文目录一览：

Vue.js构建项目笔记2:vuejs+vue-router（vue.js router）
1、vue vue2.0 vue-cli vue-router webpack
vue+vue-router+axios+element-ui构建vue实战项目之七（渲染content.vue内容）
vue+vue-router+axios+element-ui构建vue实战项目之三（认识项目文件）
vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）

Vue.js构建项目笔记2:vuejs+vue-router（vue.js router）

一.使用vue文件

继续1的学习，我们知道使用：

可以把.vue文件的内容解析成组件对象的形式：

解析类似如下：

我们使用es6的语法，把render的回调处理参数使用这种处理：

import Vue from ''vue''
import App from ''./App.vue''


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

显示正常：

二.组件使用

1.组件嵌套

我们已经学习了如何定义组件，组件同样提供了嵌套功能，也就是组件可以嵌套组件：

main.js定义一个组件，注册:

import Vue from ''vue''
import App from ''./App.vue''

// 注册
Vue.component(''my-component'', {
  template: ''<div>A custom component!</div>''
})


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

App.vue在组件中嵌套使用：

<template>
  <div id="app">
  	helloworld
	<my-component></my-component>
  </div>
  
</template>

<script>
export default {
  name: ''app''
}
</script>

显示正常：

对于注册组件的第一个参数，是组件名字，第二个参数也就是组件类型对象，我们知道可以解析.vue文件为这样的对象，我们创建：

myComponent.vue:

<template>
  <div>A custom component!</div>
  
</template>

<script>
export default {
  name: ''myComponent''
}
</script>

main.js使用es6导入注册：

import Vue from ''vue''
import App from ''./App.vue''

import myComponent from ''./myComponent.vue''
Vue.component(''my-component'', myComponent)


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

2.组件局部注册

除了使用Vue.component注册一个组件，还可以局部注册，注册在vue新建的实例中：

3.父组件给子组件传值

我们在注册一个组件，是my-component组件的子组件：

weComponent.vue:

<template>
  <div>
  	我是myComponent的儿子
  </div>
  
</template>

<script>
export default {
  name: ''weComponent''
}
</script>

main.js注册：

import Vue from ''vue''
import App from ''./App.vue''

import myComponent from ''./myComponent.vue''
import weComponent from ''./weComponent.vue''

Vue.component(''my-component'', myComponent)
Vue.component(''we-component'', weComponent)


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

myComponent.vue使用：

<template>
  <div>
  	<div>我是myComponent组件</div>
	<we-component></we-component>
  </div>
  
</template>

<script>
export default {
  name: ''myComponent''
}
</script>

vue组件的传值方式就是使用属性的方式，然后在子组件中用props属性接收，不过在组件中data数据的设置必须使用函数的形式，在调用位置使用v-bind:xx绑定属性即可：

myComponent.vue：

<template>
  <div>
  	<div>我是myComponent组件</div>
	<we-component v-bind:val1="val1"></we-component>
  </div>
  
</template>

<script>
export default {
  name: ''myComponent'',
  data:function(){
  	return {
		val1:"我是小李子"
	}
  }
}
</script>

weComponent.vue子组件接收使用props：

<template>
  <div>
  	我是myComponent的儿子
	<h3>{{val1}}</h3>
  </div>
  
</template>

<script>
export default {
  name: ''weComponent'',
  props:["val1"]
}
</script>

同样的子组件接收到父组件的值，父组件中这个值变化时，子组件会自动更新到，我们可以给父组件加一个方法，修改这个传入子组件的值，在vue中绑定事件使用的是v-on:xx(事件名字)=方法，方法要写在methods属性中，在组件内部，获取data的值只需要this.xx即可！

myComponent.vue：

<template>
  <div>
  	<div>我是myComponent组件</div>
	<we-component v-bind:val1="val1"></we-component>
	<button v-on:click="clickVal">点击修改val1的值</button>
  </div>
  
</template>

<script>
export default {
  name: ''myComponent'',
  data:function(){
  	return {
		val1:"我是小李子"
	}
  },
  methods:{
  	clickVal:function(){
		this.val1=this.val1+"1"
	}
  }
}
</script>

点击一次按钮：

4.子组件通信给父组件

是上一种操作的逆处理，vue为我们提供了这样的接口，在子组件的this会有一个$emit方法，他的参数就是绑定在调用这个组件位置上定义的事件：

weComponent.vue:

<template>
  <div>
  	我是myComponent的儿子
	<h3>{{val1}}</h3>
	<button v-on:click="clickPar">告诉父组件值+2</button>
  </div>
  
</template>

<script>
export default {
  name: ''weComponent'',
  props:["val1"],
  methods:{
  	clickPar:function(){
		this.$emit("parAdd2")
	}
  }
}
</script>

在父组件自定义这个事件，调用一个对应的方法+2：

myComponent.vue:

<template>
  <div>
  	<div>我是myComponent组件</div>
	<we-component v-bind:val1="val1"  v-on:parAdd2="clickVal2"></we-component>
	<button v-on:click="clickVal">点击修改val1的值</button>
  </div>
  
</template>

<script>
export default {
  name: ''myComponent'',
  data:function(){
  	return {
		val1:"我是小李子"
	}
  },
  methods:{
  	clickVal:function(){
		this.val1=this.val1+"1"
	},
	clickVal2:function(){
		this.val1=this.val1+"2"
	}
  }
}
</script>

三.tab切换效果

我们这时候会定义多个组件，分别是：

myComponent.vue

youComponent.vue

loveComponent.vue

myComponent.vue:

<template>
  <div>
  	{{info}}
  </div>
  
</template>

<script>
export default {
  name: ''myComponent'',
  data:function(){
  	return {
		info:"myComponent"
	}
  }
}
</script>

youComponent.vue:

<template>
  <div>
  	{{info}}
  </div>
  
</template>

<script>
export default {
  name: ''youComponent'',
  data:function(){
  	return {
		info:"youComponent"
	}
  }
}
</script>

loveComponent.vue:

<template>
  <div>
  	{{info}}
  </div>
  
</template>

<script>
export default {
  name: ''loveComponent'',
  data:function(){
  	return {
		info:"loveComponent"
	}
  }
}
</script>

main.js注册：

import Vue from ''vue''
import App from ''./App.vue''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''

Vue.component(''my-component'', myComponent)
Vue.component(''you-component'', youComponent)
Vue.component(''love-component'', loveComponent)


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

App.vue应用：

<template>
  <div id="app">
  	<h3>tab切换显示：</h3>
	<my-component></my-component>
	<you-component></you-component>
	<love-component></love-component>
  </div>
  
</template>

<script>
export default {
  name: ''app''
}
</script>

对于显示隐藏vue为我们提供了v-if和v-show指令，我们在data设置对应的值，控制即可：

<template>
  <div id="app">
  	<h3>tab切换显示：</h3>
	<my-component v-if="isshowmy"></my-component>
	<you-component v-if="isshowyou"></you-component>
	<love-component v-if="isshowlove"></love-component>
  </div>
  
</template>

<script>
export default {
  name: ''app'',
  data:function(){
  	return {
		isshowmy:true,
		isshowyou:false,
		isshowlove:false	
	}
  }
}
</script>

既然是tab切换，只有内容是不对的，还得有对应的三个菜单，我们写好他们：

<template>
  <div id="app">
  	<h3>tab切换显示：</h3>
	<ul>
		<li>my-component</li>
		<li>you-component</li>
		<li>love-component</li>
	</ul>
	<div>
		<my-component v-if="isshowmy"></my-component>
		<you-component v-if="isshowyou"></you-component>
		<love-component v-if="isshowlove"></love-component>	
	</div>

  </div>
  
</template>

<script>
export default {
  name: ''app'',
  data:function(){
  	return {
		isshowmy:true,
		isshowyou:false,
		isshowlove:false	
	}
  }
}
</script>

我们要给li加入事件，控制对应显示，我们最简单就是把data的key做参数传递给定义的方法，修改为true，其他是false:

<template>
  <div id="app">
  	<h3>tab切换显示：</h3>
	<ul>
		<li v-on:click="tab(''isshowmy'')">my-component</li>
		<li v-on:click="tab(''isshowyou'')">you-component</li>
		<li v-on:click="tab(''isshowlove'')">love-component</li>
	</ul>
	<div>
		<my-component v-if="isshowmy"></my-component>
		<you-component v-if="isshowyou"></you-component>
		<love-component v-if="isshowlove"></love-component>	
	</div>

  </div>
  
</template>

<script>
export default {
  name: ''app'',
  data:function(){
  	return {
		isshowmy:true,
		isshowyou:false,
		isshowlove:false	
	}
  },
  methods:{
  	tab:function(key){
		this.isshowmy=false;
		this.isshowyou=false;
		this.isshowlove=false;
		this[key]=true;
		
	}
  }
}
</script>

其实我们还有一个小操作，就是希望地址也对应变化，我们获取key之后，操作window.location.href=#/xx即可！

看地址变化：

四.tab效果修改地址，在激发修改结构显示

我们还是基于上面的例子，我们这次点击li只是修改地址而已：

我们知道vue提供了一个watch属性，可以监听某个属性变化，然后做出处理，我们可以把地址放在data的一个属性中，监听他是否修改，然后在修改显示元素对应的布尔值：

<template>
  <div id="app">
  	<h3>tab切换显示：</h3>
	<ul>
		<li v-on:click="tab(''isshowmy'')">my-component</li>
		<li v-on:click="tab(''isshowyou'')">you-component</li>
		<li v-on:click="tab(''isshowlove'')">love-component</li>
	</ul>
	<div>
		<my-component v-if="isshowmy"></my-component>
		<you-component v-if="isshowyou"></you-component>
		<love-component v-if="isshowlove"></love-component>	
	</div>

  </div>
  
</template>

<script>
export default {
  name: ''app'',
  data:function(){
  	return {
		url:"",
		isshowmy:true,
		isshowyou:false,
		isshowlove:false	
	}
  },
  watch:{
  	url:function(newurl){
		this.isshowmy=false;
		this.isshowyou=false;
		this.isshowlove=false;
		this[newurl]=true;
	}
  },
  methods:{
  	tab:function(key){
		window.location.href="#/"+key;
		this.url=key;
		
	}
  }
}
</script>

这时候我们的流程就是点击修改了地址，然后根据地址在去控制对应结构的显示。

五.路由使用，vue-router

在我们单页开发中，路由是非常重要的，就像上面的例子，我们如果有很多控制显示隐藏的处理，是非常麻烦的，

修改地址，然后显示对应的结构，就变得清晰明了。

vue-router可以帮助我们非常出色的解决问题，还是如上例子的处理，我们使用vue-router完成我们的实现，

用vue-router就要有这个依赖，我们安装vue-router有两种方式：

package.json配置好，

{
  "name": "stydy-vue",
  "description": "study-vue",
  "version": "1.0.0",
  "author": "tbd",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
	"vue-router": "^*"
  }
}

然后执行：

npm install

npm手动安装

npm install vue-router

等待完成即可！

如何终止启动的项目：ctrl+c

1.引用路由

路由的引入非常简单：

2.配置路由

然后就是简单的配置：

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''


//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

3.注册到vue中

这时候在对应的地址下，配置了使用的对应组件，然后使用VueRouter帮助生成这个实例，然后应用到vue实例中：

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''


//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})


var app = new Vue({
  router,
  render:h=>h(App)
}).$mount("#app")

4.使用路由

路由为我们提供了它写好的组件，我们只要直接使用即可！

<router-link to="/isshowmy">my-component</router-link>

最终会被解析成a标签，href就是to的设置，地址点击之后就会变为#/isshowmy的形式

<router-view></router-view>

会根据的路由配置，匹配好，然后显示对应组件。

App.js:

<template>
  <div id="app">
  	<h3>tab切换显示：</h3>
	<ul>
		<li><router-link to="/">my-component</router-link></li>
		<li><router-link to="/youComponent">you-component</router-link></li>
		<li><router-link to="/loveComponent">love-component</router-link></li>
	</ul>
	<div>
		<router-view></router-view>
	</div>

  </div>
  
</template>

<script>
export default {
  name: ''app''
}
</script>

六.路由参数获取

1.?形式传参

我们修改我们的myComponent.vue，加入一个列表，然后跳到详情页面，一会我们在创建详情页的组件和配置对应路由：

myComponent.vue我们使用vue提供的v-for指令做循环处理：

<template>
  <div>
  	{{info}}
	<ul>
		<li v-for="(item, index) in list"><a v-bind:href="''#/myDetail?id=''+item.id">{{item.title}}</a></li>
	</ul>
  </div>
  
</template>

<script>
export default {
  name: ''myComponent'',
  data:function(){
  	return {
		info:"myComponent",
		list:[
			{id:1,title:"c1111111"},
			{id:2,title:"c2222222222"},
			{id:3,title:"c33333333"},
			{id:4,title:"c4444444"},
			{id:5,title:"c55555555"}
		]
	}
  }
}
</script>

创建myDetail.vue:

<template>
  <div>
  	我是详情页面
  </div>
  
</template>

<script>
export default {
  name: ''myDetail''
}
</script>

main.js加入路由配置：

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''
import myDetail from ''./myDetail.vue''

//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent},
  { path: ''/myDetail'', component: myDetail}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})


var app = new Vue({
  router,
  render:h=>h(App)
}).$mount("#app")

我们看那一下效果：

点击列表进入详情页面：

我们在new vue实例的时候使用了路由对象，

那么在任何组件中我们的this都会有一个$route属性，里面会包含所有路由相关的信息和方法处理，

我们在详情组件的生命周期函数中打印出这个属性的内容：

myDetail.vue,对于生命周期函数，就是组件渲染的阶段：

<template>
  <div>
  	我是详情页面
  </div>
  
</template>

<script>
export default {
  name: ''myDetail'',
  created: function () {
    console.log(this.$route)
  }
}
</script>

看到打印入下：

在如见中显示这个id非常简单，在组件内获取的话就是this.$route. query .id即可！

<template>
  <div>
  	我是详情页面id{{this.$route.query.id}}
  </div>
  
</template>

<script>
export default {
  name: ''myDetail'',
  created: function () {
    console.log(this.$route)
  }
}
</script>

2./url/:id形式传参

这种处理，我们要在路由配置进行处理：

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''
import myDetail from ''./myDetail.vue''

//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent},
  { path: ''/myDetail/:id'', component: myDetail}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})


var app = new Vue({
  router,
  render:h=>h(App)
}).$mount("#app")

在传递位置，我们就可以用地址的形式了：

myComponent.vue:

<template>
  <div>
  	{{info}}
	<ul>
		<li v-for="(item, index) in list"><a v-bind:href="''#/myDetail/''+item.id">{{item.title}}</a></li>
	</ul>
  </div>
  
</template>

<script>
export default {
  name: ''myComponent'',
  data:function(){
  	return {
		info:"myComponent",
		list:[
			{id:1,title:"c1111111"},
			{id:2,title:"c2222222222"},
			{id:3,title:"c33333333"},
			{id:4,title:"c4444444"},
			{id:5,title:"c55555555"}
		]
	}
  }
}
</script>

在接收端，我们看console的结果：

我们只需要把query改成params即可！

myDetail.vue:

<template>
  <div>
  	我是详情页面id{{this.$route.params.id}}
  </div>
  
</template>

<script>
export default {
  name: ''myDetail'',
  created: function () {
    console.log(this.$route)
  }
}
</script>

七.手动跳转

我们的

会被解析成a，不过有的时候我们需要在一个事件里面去跳转，比如登录操作：

youComponent.vue:

<template>
  <div>
  	{{info}}
	<button v-on:click="skip">登录</button>
  </div>
  
</template>

<script>
export default {
  name: ''youComponent'',
  data:function(){
  	return {
		info:"youComponent"
	}
  },
  methods:{
  	skip:function(){
		this.$router.push("loveComponent")
	}
  }
}
</script>

路由除了提供$route之外，还提供了$router，这里面有对应的跳转方法，我们调用即可！

八.嵌套路由

这个其实也是非常常用的，一个简单的例子，关于我们页面，这个关于我们地址是：

#/about

他的下面还有三个页面：

联系方式#/about/phone

信息#/about/info

地址#/about/address

这样就出现了嵌套关系，在关于我们有一部分内容是公用的，同样点击对于的a会显示不同的内容，当时你是用tab切换也可以。

嵌套路由的配置和路由配置一样，不过是多一级的设置：

main.js:

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''
import myDetail from ''./myDetail.vue''
import lovePhone from ''./lovePhone.vue''
import loveInfo from ''./loveInfo.vue''
import loveAddress from ''./loveAddress.vue''
//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent,
  	  children: [
        {
          path: ''lovePhone'',
          component: lovePhone
        },
        {
          path: ''loveInfo'',
          component: loveInfo
        },
        {
          path: ''loveAddress'',
          component: loveAddress
        }
      ]
  },
  { path: ''/myDetail/:id'', component: myDetail}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})


var app = new Vue({
  router,
  render:h=>h(App)
}).$mount("#app")

loveComponent.vue使用嵌套处理，router-link不用多说，重要的是这里面的<router-view></router-view>，根据配置关系，看到这个二级地址之后会找到他一级的结构，然后找到router-view去渲染：

<template>
  <div>
  	{{info}}
	<ul>
		<li><router-link to="/loveComponent/lovePhone">lovePhone</router-link></li>
		<li><router-link to="/loveComponent/loveInfo">loveInfo</router-link></li>
		<li><router-link to="/loveComponent/loveAddress">loveAddress</router-link></li>
	</ul>
	<div>
		<router-view></router-view>
	</div>
  </div>
  
</template>

<script>
export default {
  name: ''loveComponent'',
  data:function(){
  	return {
		info:"loveComponent"
	}
  }
}
</script>

我们一次创建这三个组件，

lovePhone.vue:

<template>
  <div>
  	{{info}}
  </div>
  
</template>

<script>
export default {
  name: ''lovePhone'',
  data:function(){
  	return {
		info:"lovePhone"
	}
  }
}
</script>

loveInfo:

<template>
  <div>
  	{{info}}
  </div>
  
</template>

<script>
export default {
  name: ''loveInfo'',
  data:function(){
  	return {
		info:"loveInfo"
	}
  }
}
</script>

loveAddress:

<template>
  <div>
  	{{info}}
  </div>
  
</template>

<script>
export default {
  name: ''loveAddress'',
  data:function(){
  	return {
		info:"loveAddress"
	}
  }
}
</script>

九.重定向

我们进入是没有内容的，其实我们打算显示出：

我们在路由配置可以加入重定向处理：

main.js:

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''
import myDetail from ''./myDetail.vue''
import lovePhone from ''./lovePhone.vue''
import loveInfo from ''./loveInfo.vue''
import loveAddress from ''./loveAddress.vue''
//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent, redirect: ''/loveComponent/lovePhone'',
  	  children: [
        {
          path: ''lovePhone'',
          component: lovePhone
        },
        {
          path: ''loveInfo'',
          component: loveInfo
        },
        {
          path: ''loveAddress'',
          component: loveAddress
        }
      ]
  },
  { path: ''/myDetail/:id'', component: myDetail}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})


var app = new Vue({
  router,
  render:h=>h(App)
}).$mount("#app")

十.路由变化监听函数

我们也许有这样的需求，比如用户的账户长时间未操作过期了，我们在进入目的页面会给用户返回到登录页面，路由为我们提供了这样的全局的路由变化监听函数：

main.js:

import Vue from ''vue''
import App from ''./App.vue''
import VueRouter from ''vue-router''

import myComponent from ''./myComponent.vue''
import youComponent from ''./youComponent.vue''
import loveComponent from ''./loveComponent.vue''
import myDetail from ''./myDetail.vue''
import lovePhone from ''./lovePhone.vue''
import loveInfo from ''./loveInfo.vue''
import loveAddress from ''./loveAddress.vue''
//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: ''/'', component: myComponent},
  { path: ''/youComponent'', component: youComponent},
  { path: ''/loveComponent'', component: loveComponent, redirect: ''/loveComponent/lovePhone'',
  	  children: [
        {
          path: ''lovePhone'',
          component: lovePhone
        },
        {
          path: ''loveInfo'',
          component: loveInfo
        },
        {
          path: ''loveAddress'',
          component: loveAddress
        }
      ]
  },
  { path: ''/myDetail/:id'', component: myDetail}
]
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes

})

router.beforeEach(function (to, from, next){
	
	console.log(to,"即将要进入的目标 路由对象");
	console.log(from,"当前导航正要离开的路由");
	next();
	
})


var app = new Vue({
  router,
  render:h=>h(App)
}).$mount("#app")

在这个函数里我们必须执行一次next函数，不设置参数就是成功跳转到目的页面，也可以设置参数，这个参数就是要跳转的新位置。

1、vue vue2.0 vue-cli vue-router webpack

因为网速还可以，所以我就是用了npm下载，可以使用淘宝镜像，把 npm 的地方换成 cnpm 就可以啦！没有安装淘宝镜像的童鞋可以搜搜。。

注：各版本内容（node 7.5.0，npm 4.1.2 ，vue 2.8.1）

查看vue版本vue -V，记得要大写
项目实际安装版本（vue：2.2.2，vue-router：2.3.0，less：2.7.2）

1、npm init webpack sousou

注:（1）sousou是项目名
   （2）创建json数据时不使用router、ESlint、test内容

2、cd sousou
注：进入到创建好的sousou文件夹

3、npm install

 注：下载packjson.json里面设置插件依赖！

4、npm run dev

 注：项目跑起来啦！

补充说明（main .js）：

版本一：
    import Vue from ''vue''
    import App from ''./App''
    
    /* eslint-disable no-new */
    new Vue ({
      //  vue 1.x 写法
      el: ''#app'',
      template: ''<App/>'',
      components: { App }                         
    })

版本二：

    import Vue from ''vue''
    import App from ''./App''

     /* eslint-disable no-new */
    new Vue ({
         //  vue 2.x 写法
          el: ''#app'',
          render: x => x(App)                    
    })

大家可以更改过后再运行npm run dev，项目一样可以跑起来哦！

重点在后面

5、因先前没有下载vue-router
现在下载使用命令：
npm install vue-router less --save-dev
注：因为要使用less预处理器，所以就和vue-router一起下载啦

6、在 src文件夹下面新建一个 router文件夹，并在其里面新建一个router.js文件
vue-router相关设置可以查看官方中文文档 https://router.vuejs.org/zh-c...
英文好的童鞋可以查看英文文档。

 import Vue from ''vue''
    import VueRouter from ''vue-router''
    Vue.use(VueRouter)
    
    const First = {template: ''<div>first的内容</div>''}
    const Second = {template: ''<div>second的内容</div>''}
    const Home = {template: ''<div>home的内容</div>''}
    
    const router = new VueRouter({
      mode: ''history'',
      base: __dirname,
      //  记得是routes，不是router，要不然显示不了导航相关页面内容
      routes: [
        {path: ''/'', component: Home},
        {path: ''/first'', component: First},
        {path: ''/second'', component: Second}
      ]
    })
    new Vue({
      router,
      template: `
        <div id = ''new''>
          <h1> 导航 </h1>
          <ul>
            <li><router-link to=''/''> 首页 </router-link></li>
            <li><router-link to=''/first''> 第一 </router-link></li>
            <li><router-link to=''/second''> 第二 </router-link></li>
          </ul>
          <router-view></router-view>
        </div>
        `
    }).$mount(''#app'')

7、main.js只输入，因为main.js是入口文件

import Vue from ''vue''
import Router from ''./router''

8、npm run dev 就可以看到设置的内容啦

今天就先介绍到这里啦！
后续有更新哦！
精彩内容请看后续文档！

vue+vue-router+axios+element-ui构建vue实战项目之七（渲染content.vue内容）

在上一节《vue+vue-router+axios+element-ui构建vue实战项目之六（渲染index.vue列表）》中，我们从后端接口获取数据，并成功渲染出一个列表。

这节内容，我们来做内容页面。

编写src/page/content.vue 文件

话不多说，直接上代码

 1 <template>
 2   <div>
 3     <h3>{{getMsg.title}}</h3>
 4     <p>作者：{{getMsg.author.loginname}}&nbsp;&nbsp;发表于：{{$utils.formatDate(getMsg.create_at)}}</p>
 5     <hr>
 6     <article v-html="getMsg.content"></article>
 7     <h4>网友回复：</h4>
 8     <ul>
 9       <li v-for="item in getMsg.replies">
10         <p>评论者：{{item.author.loginname}}，&nbsp;&nbsp;发表于：{{$utils.formatDate(item.create_at)}}</p>
11         <article v-html="item.content"></article>
12       </li>
13     </ul>
14   </div>
15 </template>
16 <script>
17   export default {
18     data (){
19       return {
20         id: this.$route.params.id,
21         getMsg: {}
22       }
23     },
24     mounted (){
25       this.getContent()
26     },
27     methods:{
28       getContent (){
29         this.$http.get(''topic/''+this.id)
30           .then(res => {
31             res.data.success && (this.getMsg = res.data.data)
32           })
33           .catch(err => {
34             console.log(err)
35           })
36       }
37     }
38   }
39 </script>
40 <style lang="scss">
41   @import "../style/style";
42 </style>

保存文件，然后我们随便点开一篇文章，看到的结果如下：

好，按照我们的需求已经渲染出来了。

-_-!!，请忽略样式！

讲解下里面的重点部分

template部分

其他的内容，我们在列表页面已经见过了。这里第一次出现 <article v-html="dat.content"></article> 这个东西。

同样是渲染内容， v-html 和 v-text 有什么区别呢？

其实区别非常简单，v-text 会把所有的内容当成字符串给直接输出出来。

而 v-html 会把字符串给转换为 html 标记语言给渲染出来。这部门更多内容，请参考：https://cn.vuejs.org/v2/api/#v-html

script部分

代码基本上是一致的，重点是 id: this.$route.params.id, 这一句。

还记得我们前面配置的路由吗？如果忘了，请移步vue+vue-router+axios+element-ui构建vue实战项目之四（修改App.vue、router和page文件）

我们是这么配置的：

 1 export default new Router({
 2   routes: [
 3     {
 4       path: ''/'',
 5       name: ''首页'',     //path别名，可删除
 6       meta:{
 7         title: ''首页''   //设置页面title
 8       },
 9       component: index
10     },
11     {
12       path: ''/content/:id'',
13       name: ''详情'',
14       meta:{
15         title: ''详情''
16       },
17       component: content
18     }
19   ]
20 })

重点：path: ''/content/:id'', 中，我们使用了 :id 这个东西。

这是动态路由匹配。参考文档：《vue动态路由匹配》

我们需要从 url 中获取 id，然后根据这个 id 来进行数据的查询。

从浏览器地址可以看到， url已经包含了这个 id 。

http://localhost:8080/#/content/5c7e9a0d90c14711cc8ca9d8

如上：5c7e9a0d90c14711cc8ca9d8 这个就是 id。

我们如何取出来呢？

不用想很多复杂的事情，vue-router 早就给我们准备了解决方法了。

我们可以在项目中打印如下代码：

console.log(this.$route)

打印结果，如图

我们再看下我们的接口数据调用，代码如下：

1 this.$http.get(''topic/''+this.id)
2           .then(res => {
3             res.data.success && (this.getMsg = res.data.data)
4           })
5           .catch(err => {
6             console.log(err)
7           })

等于没什么要说的，就是把数据拿过来了而已，需要注意的是，我们的请求的接口地址是根据 id 进行变化的。

所以，我这边采用了字符串拼接的方法，''topic/'' + this.id 来得到我们真正想要请求的接口数据。

好，到这里为止，我们已经非常顺利的把列表页面和内容页面已经渲染出来了！

如果我们按照这个步骤，相信你也顺利的得到了一样的结果。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！

vue+vue-router+axios+element-ui构建vue实战项目之三（认识项目文件）

在上一篇《vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）》中，我们通过安装 nodejs 系统环境，以及 vue-cli 脚手架工具，在执行完命令后，我们就已经将一个初始项目跑起来了。

那么这篇文章，我们就来认识下项目中的各文件夹及里面的文件，它们是什么，以及它们的作用。

话不多说，开干。

项目初始文件解读

 1 ├── node_modules                    # 项目依赖包文件夹
 2 ├── build                           # 编译配置文件，一般不用管
 3 │   ├── build.js
 4 │   ├── check-versions.js
 5 │   ├── logo.png
 6 │   ├── utils.js
 7 │   ├── vue-loader.conf.js
 8 │   ├── webpack.base.conf.js
 9 │   ├── webpack.dev.conf.js
10 │   └── webpack.prod.conf.js
11 ├── config                           # 项目基本设置文件夹
12 │   ├── dev.env.js                   # 开发配置文件
13 │   ├── index.js                     # 配置主文件
14 │   └── prod.env.js                  # 编译配置文件
15 ├── src                              # 项目源码编写文件
16 │   ├── App.vue                      # APP入口文件
17 │   ├── assets                       # 初始项目资源目录，回头删掉
18 │   │   └── logo.png
19 │   ├── components                   # 组件目录
20 │   │   └── Hello.vue                # 测试组件，回头删除
21 │   ├── main.js                      # 主配置文件
22 │   └── router                       # 路由配置文件夹
23 │       └── index.js                 # 路由配置文件
24 └── static                           # 资源放置目录
25 ├── index.html                       # 项目入口html模板
26 ├── package.json                     # 项目依赖包配置文件
27 ├── .babelrc                         # babel 配置
28 ├── .postcssrc.js                    # postcss 配置
29 ├── .editorconfig                    # editor 配置
30 └── README.md                        # 项目说明文档

好，以上就是项目完整的文件目录结构。

其实，我们开发的时候，主要就是操作 src 里面的文件，不过开发的时候，还需要我们重新整理下里面的文件。

另外 static 资源目录，我们也需要根据放置不同的资源，在这边构建不同的子文件夹。

配置src和static目录

先配置 src 目录，也可以根据自己的实际需求配置目录：

 1 ├── api                           // 接口调用工具文件夹
 2 │   └── index.js                   
 3 ├── components                    // 组件文件夹
 4 │    ├── header.vue                
 5 │    └── footer.vue                  
 6 ├── page                          // 页面文件夹
 7 │   ├── content.vue               // 内容页面
 8 │   └── index.vue                 // 首页列表
 9 ├── router                        // 路由配置文件夹
10 │   └── index.js                
11 ├── store                         // vuex状态管理目录    
12 ├── style                         // scss 样式存放目录
13 │   └── style.scss                // 主样式文件，可以按分类创建多个文件夹
14 └── utils                         // 常用工具文件夹
15 │   └── index.js                    
16 ├── App.vue                       // APP入口文件
17 └── main.js                       // 项目配置文件

*.vue 文件，是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。

每个 .vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。

这三个部分分别代表了 html,js,css。

接下来，我们配置 static 目录，比较简单，适用于绝大多数项目：

1 ├── css               # 放第三方的样式文件
2 ├── font              # 放字体图标文件
3 ├── image             # 放图片文件，里面可以根据图片种类创建文件夹
4 └── js                # 放第三方的JS文件，比如datepicker

可能有人会疑惑，src 目录里面已经包含样式和JS，为什么还要在 static 文件里面放置呢？

因为，如果是放在 src 目录里面，则每次打包的时候，都需要打包的。但是 static里面的文件，我们一般是不会去修改的，也没必要 npm 安装，直接引用就好了。

好了，本篇文章就这么多，下节就开始实战吧！

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！

vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）

在上一篇《vue+vue-router+axios+element-ui构建vue实战项目之一（基础知识篇）》中，我简要的说明了一下前端开发目前的趋势，以及为什么选择vue框架等等情况。

接下来本篇文章，我们来了解下vue项目开始前，开发环境的搭建（windows环境）。

话不多说，开始咯。

安装 nodejs 环境

以前看到的nodejs 的安装方案，大多都是使用终端各种命令，太费事。明明有更简便的方式干嘛不用呢？今天就介绍傻瓜式的安装方案。

nodejs 官方网站下载安装包： https://nodejs.org/，然后进行安装。

在安装好了 nodejs 之后，我们在终端中输入以下两个命令：

如果能够正确显示版本号，证明我们的nodejs安装成功。

安装 vue-cli 脚手架工具

在终端输入：

npm install vue-cli -g

简单的介绍下：

npm 是 nodejs 的官方包管理器。可以简单的理解为，用这个来管理所有的依赖包（虽然不仅仅是如此）。
install 命令表示执行安装操作（uninstall、update等）。
-g 是命令参数，代表，这个包将安装为系统全局的包（就是说，在任何地方都可以用这个包）。
vue-cli 是我们要安装的包。

安装完成后，终端输入：

注意：vue -V中，V是大写的。

也可以输入vue，查看相关信息，比如

基本的环境搭建完成了，接下来，我们正式创建一个vue项目

用 vue-cli 构建一个项目

首先，跳转到准备放项目的文件夹，然后shift+鼠标右键，选择‘在此处打开命令窗口’，在终端输入：

vue init webpack my-vue-project

vue就是我们刚刚安装的vue-cli脚手架的命令，init是初始化一个以webpack为模版、名字叫my-vue-project的项目（当然，init不止支持webpack模版，还有其他，请移步github查看更多vuejs-templates相关信息）。

当你输入命令后，按回车键，终端会提示你信息，如果不想设置，我们只需一直按回车即可。

不过，我还是要介绍一下里面提示的信息。

1 ? Project name (my-vue-project)  --项目名称，如果不想改，直接回车

2 ? Project description(A Vue.js project)  --项目描述，如果不想改，直接回车

3 ? Author (24439...)  --项目作者，如果不想改，直接回车

4 ? Vue build (Use arrow keys) --是否需要安装编译器，我们选择安装，直接回车

5 ? Install vue-router (Y/n)  --是否需要安装vue-router路由管理，我们选择安装，直接回车

6 ? Use ESLint to lint your code? (Y/n)  --安装eslint检查语法，我选择不安装，按n，再按回车（如果安装，按回车）

7 ? Setup unit tests? (Y/n)  --安装单元测试，我选择不安装，按n，再按回车

8 ? Setup e2e tests with Nightwatch? (Y/n)  --还是关于测试，我选择不安装，按n，再按回车

所有操作完成后，得到如下图示结果，项目基础配置成功，接下来就是安装中

安装需要联网，如果npm被墙，请使用cnpm安装

安装方法：

npm install cnpm -g --registry=https://registry.npm.taobao.org

更多信息，请移步cnpm官网。

项目安装完成，如图：

按照提示，我们终端输入：

cd my-vue-project 

npm run dev

如图项目启动成功，我们在浏览器输入 http://localhost:8080 ，访问成功：

好了，我们nodejs和vue-cli工具已经顺利安装，并且成功搭建了一个vue项目。

下一篇，我将介绍这个init vue项目的基本信息。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！

我们今天的关于Vue.js构建项目笔记2:vuejs+vue-router和vue.js router的分享已经告一段落，感谢您的关注，如果您想了解更多关于1、vue vue2.0 vue-cli vue-router webpack、vue+vue-router+axios+element-ui构建vue实战项目之七（渲染content.vue内容）、vue+vue-router+axios+element-ui构建vue实战项目之三（认识项目文件）、vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）的相关信息，请在本站查询。

本文标签：