Vue-路由配置和使用步骤整理

介绍

路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》

安装

本地环境安装路由插件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. 引入：

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

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'//从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理

 Vue.config.productionTip = false;
 Vue.use(VueResource)

 //这样以后，就可以在任何组件页面中使用http了
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,//引用router
   template: '<App/>',
   components: { App }
 })

main.js

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
 import Content from '@/components/Content'
 import About from '@/components/About'
 import Submit from '@/components/Submit'

 Vue.use(Router)

 export default new Router({
   routes: [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/content',
       name: 'Content',
       component: Content
     },
     {
         path: '/about',
         name: 'About',
         component: About
     },
     {
         path: '/submit',
         name: 'Submit',
         component: Submit
     }
   ],
   mode: "history"//干掉地址栏里边的#号键
 })

src/router/index.js(router的主要配置文件)

App.vue 展示Vue

 <template>
   <div id="app">
     <app-header></app-header>
     <app-nav></app-nav>
     <!-- 展示router -->
     <router-view></router-view>
     <app-footer></app-footer>
   </div>
 </template>

 <script>
   import Header from './components/Header'
   import Footer from './components/Footer'
   import Navbar from './components/Navbar'
   export default {
     name: 'app',
     data () {
       return {

       }
     },
     components: {//局部注册组件这里，可能会定义多个组件，所以component这个单词加上“s”
       "app-header": Header,
       "app-footer": Footer,
       'app-nav': Navbar
     }
   }
 </script>

 <style>

 </style>

App.vue 的router-view 标签

导航页面的路由链接设置，用于切换组件

 <template>
     <nav class="app-nav">
         <ul class="ul-father">
             <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}">
             <!-- 路由切换组件 -->
                 <router-link v-bind:to="item.url">
                     {{ item.title }}
                 </router-link>
                 <template v-if="item.value">
                     <ul class="ul-child" v-show="item.show">
                         <li class="li-child" v-for="x in item.value">
                             <a href="javascript:;">
                                 {{ x }}
                             </a>
                         </li>
                     </ul>
                 </template>
             </li>
         </ul>
     </nav>
 </template>
 <script>
     export default {
         name: "app-nav",
         data (){
             return {
                 arr: [
                     {
                         title: "首页",
                         value: ["一","二","三","四"],
                         url: "/",
                         show: false
                     },
                     {
                         title: "新闻" ,
                         value: ["二","二","三","四"],
                         url: "/content",
                         show: false
                     },
                     {
                         title:  "关于",
                         url: "/about"
                     },
                     {
                         title: "投稿",
                         url: "/submit"
                     }
                 ]
             }
         }
     }
 </script>
 <style scoped>
     .app-nav{
         margin-bottom: 20px;
     }
     ul.ul-father {
       background: Lightgreen;
       margin: 0;
     }
     .li-father {
         position: relative;
         display: inline-block;
         width: 20%;
       margin: 0;
     }
     li a {
         display: block;
       padding: 15px 0;
       color: #333;
       text-decoration: none;
     }
     li a:hover,.bgchange>a{
         color: #fff;
         background: #222;
     }
     .ul-child{
         position: absolute;
         top: 51px;
         left: 0;
         width: 100%;
         background: Lightgreen;
     }
 </style>

NavBar.Vue页面，主要用于页面切换的导航组件

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/