Vue.js之路由
以前的跳转都是使用a标签，a标签里有一个属性叫href，给他一个对应的网络地址或者一个路径的话，它就会帮助跳转到对应的页面。
Vue.js的路由，其实跟我们的a标签实现的功能是一样的，我们也是实现一个对应的跳转，只不过路由的性能更优化，a标签不管点击多少次，都会发生对应的网络请求，页面会不停地进行页面刷新，但是路由不一样，只要使用路由机制的话，你只要点击之后，他不会出现我们的请求以及页面刷新，直接就转换到你要去的地址，这是我们使用路由的好处。
要使用路由，需要先安装路由模块，在IDE的Terminal中输入这句话： npm install vue-router --save-dev 来安装。
安装路由模块以后就可以在项目里使用路由了。
使用路由首先要在main.js当中进行设置，通过 import VueRouter from 'vue-router' 将我们的路由模块先引进来，然后在下面通过 Vue.use(VueRouter) 使用一下引用进来的模块。
使用路由以后就可以在下面进行配置路由了：
1 const router = new VueRouter({ 2 routes:[ 3 {path:'/',component:Home}, 4 {path:'/helloworld',component:HelloWorld} 5 ], 6 mode:"history"
7 })
path是要路由的地址，component是抓取到地址后要跳转到的组件。这里要跳转到的组件也要在main.js中引入.
例如: import HelloWorld from './components/HelloWorld' 和 import Home from './components/Home'
一个小demo
main.js文件：
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 import App from './App'
4 import HelloWorld from './components/HelloWorld'
5 import Home from './components/Home'
6
7 Vue.config.productionTip = false
8 Vue.use(VueRouter) 9
10 //配置路由
11 const router = new VueRouter({ 12 routes:[ 13 {path:'/',component:Home}, 14 {path:'/helloworld',component:HelloWorld}, 15 ], 16 mode:"history"
17 }) 18
19 new Vue({ 20 router, 21 el: '#app', 22 components: { App }, 23 template: '<App/>'
24 })
要在路由中加 mode：”history“ ，否则项目地址会多出 localhost:8080/#/ ，会影响我们项目的功能。
Home.vue文件：
1 <!--模板-->
2 <template>
3 <div id="home">
4 <app-header @titleChanged="updateTitle($event)" :title="title"></app-header>
5 <users :users="users"></users>
6 <app-footer></app-footer>
7 </div>
8 </template>
9
10 <!--行为-->
11 <script>
12 //局部注册组件
13 import Users from './Users'
14 import Header from './Header'
15 import Footer from './Footer'
16
17 export default { 18 name: 'home', 19 data(){ 20 return { 21 users:[ 22 {name:"Henry",Position:"Java工程师",show:false}, 23 {name:"Lily",Position:"Java工程师",show:false}, 24 {name:"Kang",Position:"Java工程师",show:false}, 25 {name:"Henry",Position:"Java工程师",show:false}, 26 {name:"Henry",Position:"Java工程师",show:false} 27 ], 28 title:"这是一个title！"
29 } 30 }, 31 methods:{ 32 updateTitle:function (title) { 33 this.title = title; 34 } 35 }, 36 components:{ 37 "users":Users, 38 "app-header":Header, 39 "app-footer":Footer 40 } 41
42 } 43 </script>
44
45 <!--样式-->
46 <style >
47
48 h1{
49 color: pink;
50 }
51 </style>
HelloWorld.vue文件：
1 <template>
2 <div class="hello">
3 hello,world! 4 </div>
5 </template>
6
7 <script>
8 export default { 9 name: 'HelloWorld', 10 data () { 11 return { 12 } 13 } 14 } 15 </script>
16
17 <!-- Add "scoped" attribute to limit CSS to this component only -->
18 <style scoped>
19
20 </style>
Header.vue文件：
1 <template>
2 <header @click="changeTitle">
3 <h1>{{title}}</h1>
4 </header>
5 </template>
6
7 <script>
8 export default { 9 name: 'app-header', 10 data () { 11 return { 12 title1:"Vue.js Demo"
13 } 14 }, 15 props:{ 16 title:{ 17 type:String 18 } 19 }, 20 methods:{ 21 changeTitle:function(){ 22 this.$emit("titleChanged","子向父组件传值"); 23 } 24 } 25 } 26 </script>
27
28 <style scoped>
29 header{
30 background: pink;
31 padding: 10px;
32 }
33 h1{
34 color: #222;
35 text-align: center;
36 }
37 </style>
Footer.vue文件：
1 <template>
2 <footer>
3 <p>{{copyright}}</p>
4 </footer>
5 </template>
6
7
8 <script>
9 export default { 10 data () { 11 return { 12 copyright:"Copyright 2018 Vue Demo"
13 } 14 } 15 } 16 </script>
17
18 <style scoped>
19 footer{
20 background: #666;
21 padding: 6px;
22 }
23 footer p{
24 color: pink;
25 text-align: center;
26 }
27 </style>
User.vue文件：
1 <template>
2 <div class="users">
3 <ul>
4 <li v-for="user in users"
5 @click="user.show = !user.show">
6 <h2 >{{user.name}}</h2>
7 <h3 v-show="user.show">{{user.Position}}</h3>
8 </li>
9 </ul>
10 </div>
11 </template>
12
13 <script>
14 export default { 15 name: 'users', 16 // props:['users']
17 props:{ 18 users:{ 19 type:Array, 20 required:true
21 } 22 } 23 } 24 </script>
25
26 <style scoped>
27 .users{
28 width: 100%;
29 max-width: 1200px;
30 margin:40px auto;
31 padding: 0 20px;
32 box-sizing: border-box;
33 }
34 ul{
35 display: flex;
36 flex-wrap: wrap;
37 list-style-type: none;
38 padding: 0;
39 }
40 li{
41 flex-grow: 1;
42 flex-basis: 200px;
43 text-align: center;
44 padding: 30px;
45 border: 1px solid #666;
46 margin: 10px;
47 }
48 </style>
然后在App.vue文件中加入导航;
App.vue文件：
1 <!--模板-->
2 <template>
3 <div id="app">
4 <ul>
5 <li><a href="/">Home</a></li>
6 <li><a href="/helloworld">Hello</a></li>
7 <li> <router-link to="/">Home</router-link> </li>
8 <li> <router-link to="/helloworld">Hello</router-link> </li>
9 </ul>
10 <router-view></router-view>
11 </div>
12 </template>
13 <!--行为-->
14 <script>
15
16 export default { 17 name: 'App', 18 data(){ 19 return { 20 } 21 }, 22 methods:{ 23 } 24 } 25 </script>
26 <!--样式-->
27 <style >
28
29 </style>
这里如果使用 <a href=""></a> 标签，点击时候会跳转和刷新页面，而使用路由 <router-link to=""></router-link> 则不会，to跟a标签里的href是一样的.