介绍
路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》
安装
本地环境安装路由插件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 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 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 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 100%; 82 background: Lightgreen; 83 } 84 </style>