Vue.js之路由 以前的跳轉都是使用a標簽，a標簽里有一個屬性叫href，給他一個對應的網路地址或者一個路徑的話，它就會幫助跳轉到對應的頁面。 Vue.js的路由，其實跟我們的a標簽實現的功能是一樣的，我們也是實現一個對應的跳轉，只不過路由的性能更優化，a標簽不管點擊多少次，都會發生對應的網路請求 ...
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是一樣的.
