vue配置路由（router）

介绍

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

安装

本地环境安装路由插件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: '/', component: Customers }, { path: '/about', component: About } ], 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页面使用（展示）路由：

把这个标签放到对应位置：  

 

 

　　7. 路由切换（原来的等地方）：把切换标签和链接改成：

 

首页 关于我们

//这里，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 $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router'
import VueResource from 'vue-resource' //从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理

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

})

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Customers from '@/components/Customers'
import About from '@/components/About'

//使用注册
Vue.use(Router);
export default new Router({
    routes: [{
            path: '/',
            component: Customers
        },
        {
            path: '/about',
            component: About
        }
    ],
    mode: "history"
})

App.vue 展示Vue

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