介紹
路由：控制組件之間的跳轉，不會實現請求、不用頁面刷新，直接跳轉-切換組件》》》
安裝
本地環境安裝路由插件vue-router： cnpm install vue-router --save-dev
*沒有安裝淘寶鏡像的可以將 cnpm 替換成 npm
想要安裝的可以看這篇文章http://www.cnblogs.com/padding1015/p/7162024.html，（打開搜索 鏡像 即可跳轉到對應位置）
配置
兩種配置方法：在main.js中 || 在src/router文件夾下的index.js中
這里只說在src/router/index.js中的
- 引入：
|
1
2
3
|
import
Vue from
'vue'
import
Router from
'vue-router'
|
注意這個Router是自定義的名字，這里叫這個名字后，下邊都要用到的
2. 使用/注冊：
|
1
|
Vue.use(Router)
|
3. 配置
配置路由：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export
default
new
Router({
routes: [
{
path : ‘/’,
//到時候地址欄會顯示的路徑
name : ‘Home’,
component : Home
// Home是組件的名字，這個路由對應跳轉到的組件。。注意component沒有加“s”.
},
{
path : ‘/content’,
name : ‘Content’,
component : Content
}
],
mode:
"history"
})
|
4. 引入路由對應的組件地址：
|
1
2
3
|
import
Home from
'@/components/Home'
import
Home from '@/components/Content’
|
5. 在main.js中調用index.js的配置：
|
1
|
import
router from
'./router'
|
6. App.vue頁面使用（展示）路由：<!-- 展示router -->
把這個標簽放到對應位置：
|
1
|
<router-view></router-view>
|
7. 路由切換（原來的<a href=”XXX.html”>等地方）：把切換標簽和鏈接改成：
|
1
2
3
|
<router-link to=
"/"
>切換到Home組件</router-link>
<router-link to=
"/content"
>切換到Content組件</router-link>
|
//這里，to里邊的參數和配置時，path的路徑一樣即可
貼一個源碼：
貼一個源碼：
main.js
1 // The Vue build version to load with the `import` command
2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 import Vue from 'vue'
4 import App from './App'
5 import router from './router'
6 import VueResource from 'vue-resource'//從node_modules里邊把vue-resource引入進來，同引入vue文件和引入vue-router一個道理
7
8 Vue.config.productionTip = false;
9 Vue.use(VueResource)
10
11 //這樣以后，就可以在任何組件頁面中使用http了
12 /* eslint-disable no-new */
13 new Vue({
14 el: '#app',
15 router,//引用router
16 template: '<App/>',
17 components: { App }
18 })
src/router/index.js
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import Home from '@/components/Home'
4 import Content from '@/components/Content'
5 import About from '@/components/About'
6 import Submit from '@/components/Submit'
7
8 Vue.use(Router)
9
10 export default new Router({
11 routes: [
12 {
13 path: '/',
14 name: 'Home',
15 component: Home
16 },
17 {
18 path: '/content',
19 name: 'Content',
20 component: Content
21 },
22 {
23 path: '/about',
24 name: 'About',
25 component: About
26 },
27 {
28 path: '/submit',
29 name: 'Submit',
30 component: Submit
31 }
32 ],
33 mode: "history"//干掉地址欄里邊的#號鍵
34 })
App.vue 展示Vue
1 <template>
2 <div id="app">
3 <app-header></app-header>
4 <app-nav></app-nav>
5 <!-- 展示router -->
6 <router-view></router-view>
7 <app-footer></app-footer>
8 </div>
9 </template>
10
11 <script>
12 import Header from './components/Header'
13 import Footer from './components/Footer'
14 import Navbar from './components/Navbar'
15 export default {
16 name: 'app',
17 data () {
18 return {
19
20 }
21 },
22 components: {//局部注冊組件這里，可能會定義多個組件，所以component這個單詞加上“s”
23 "app-header": Header,
24 "app-footer": Footer,
25 'app-nav': Navbar
26 }
27 }
28 </script>
29
30 <style>
31
32 </style>
導航頁面的路由鏈接設置，用於切換組件
1 <template>
2 <nav class="app-nav">
3 <ul class="ul-father">
4 <li class="li-father" v-for="item in arr" v-on:mouseover="item.show = ! item.show" v-on:mouseout="item.show = ! item.show" v-bind:class="{bgchange: item.show}">
5 <!-- 路由切換組件 -->
6 <router-link v-bind:to="item.url">
7 {{ item.title }}
8 </router-link>
9 <template v-if="item.value">
10 <ul class="ul-child" v-show="item.show">
11 <li class="li-child" v-for="x in item.value">
12 <a href="javascript:;">
13 {{ x }}
14 </a>
15 </li>
16 </ul>
17 </template>
18 </li>
19 </ul>
20 </nav>
21 </template>
22 <script>
23 export default {
24 name: "app-nav",
25 data (){
26 return {
27 arr: [
28 {
29 title: "首頁",
30 value: ["一","二","三","四"],
31 url: "/",
32 show: false
33 },
34 {
35 title: "新聞" ,
36 value: ["二","二","三","四"],
37 url: "/content",
38 show: false
39 },
40 {
41 title: "關於",
42 url: "/about"
43 },
44 {
45 title: "投稿",
46 url: "/submit"
47 }
48 ]
49 }
50 }
51 }
52 </script>
53 <style scoped>
54 .app-nav{
55 margin-bottom: 20px;
56 }
57 ul.ul-father {
58 background: Lightgreen;
59 margin: 0;
60 }
61 .li-father {
62 position: relative;
63 display: inline-block;
64 width: 20%;
65 margin: 0;
66 }
67 li a {
68 display: block;
69 padding: 15px 0;
70 color: #333;
71 text-decoration: none;
72 }
73 li a:hover,.bgchange>a{
74 color: #fff;
75 background: #222;
76 }
77 .ul-child{
78 position: absolute;
79 top: 51px;
80 left: 0;
81 width: 100%;
82 background: Lightgreen;
83 }
84 </style>
1 <template>
2 <nav class="app-nav">
3 <ul class="ul-father">
4 <li class="li-father" v-for="item in arr" v-on:mouseover="item.show = ! item.show" v-on:mouseout="item.show = ! item.show" v-bind:class="{bgchange: item.show}">
5 <!-- 路由切換組件 -->
6 <router-link v-bind:to="item.url">
7 {{ item.title }}
8 </router-link>
9 <template v-if="item.value">
10 <ul class="ul-child" v-show="item.show">
11 <li class="li-child" v-for="x in item.value">
12 <a href="javascript:;">
13 {{ x }}
14 </a>
15 </li>
16 </ul>
17 </template>
18 </li>
19 </ul>
20 </nav>
21 </template>
22 <script>
23 export default {
24 name: "app-nav",
25 data (){
26 return {
27 arr: [
28 {
29 title: "首頁",
30 value: ["一","二","三","四"],
31 url: "/",
32 show: false
33 },
34 {
35 title: "新聞" ,
36 value: ["二","二","三","四"],
37 url: "/content",
38 show: false
39 },
40 {
41 title: "關於",
42 url: "/about"
43 },
44 {
45 title: "投稿",
46 url: "/submit"
47 }
48 ]
49 }
50 }
51 }
52 </script>
53 <style scoped>
54 .app-nav{
55 margin-bottom: 20px;
56 }
57 ul.ul-father {
58 background: Lightgreen;
59 margin: 0;
60 }
61 .li-father {
62 position: relative;
63 display: inline-block;
64 width: 20%;
65 margin: 0;
66 }
67 li a {
68 display: block;
69 padding: 15px 0;
70 color: #333;
71 text-decoration: none;
72 }
73 li a:hover,.bgchange>a{
74 color: #fff;
75 background: #222;
76 }
77 .ul-child{
78 position: absolute;
79 top: 51px;
80 left: 0;
81 width: 100%;
82 background: Lightgreen;
83 }
84 </style>