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 }
})

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"//干掉地址栏里边的#号键
})

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>

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

<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>

 

 

 

 

声明：

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

　　博主：xing.org1^

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