介绍
路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》
安装
本地环境安装路由插件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中的
- 引入：
import Vue from 'vue' import Router from 'vue-router'
注意这个Router是自定义的名字，这里叫这个名字后，下边都要用到的
2. 使用/注册：
Vue.use(Router)
3. 配置
配置路由：
export default new Router({
routes: [
{
path : ‘/’, //到时候地址栏会显示的路径
name : ‘Home’,
component : Home // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
},
{
path : ‘/content’,
name : ‘Content’,
component : Content
}
],
mode: "history"
})
4. 引入路由对应的组件地址：
import Home from '@/components/Home' import Home from '@/components/Content’
5. 在main.js中调用index.js的配置：
import router from './router'
6. App.vue页面使用（展示）路由：<!-- 展示router -->
把这个标签放到对应位置：
<router-view></router-view>
7. 路由切换（原来的<a href=”XXX.html”>等地方）：把切换标签和链接改成：
<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>
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/
