介绍
路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》
安装
本地环境安装路由插件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>