vue-router的使用教程

npm install vue-router --save

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

src/

新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const routes = [];

export const router = new VueRouter({
  // mode: 'history',
  routes // （缩写）相当于 routes: routes
});

src/main.js

import {router} from  './router.js'

new Vue({
  el: '#app',
    router,
  render: h => h(App)
}).$mount('#main');

src/app.vue

<template>
  <div id="main">
    <!-- 路由出口 -->
    <router-view></router-view>
    <!-- 路由匹配到的组件将渲染在这里 -->
  </div>
</template>

<script>
    export default {
        name: 'app'
    };
</script>

• 语法使用了es6，如果你有疑问 ，可以参考《ECMAScript 6 入门》

创建第一个模块

src/components

这里存放我们的模块，所有的页面文件都放在这里，我们先创建一个公共目录存放公用模块

新建main/header.vue main/footer.vue

header.vue

<template>
    <div id="header">
        <header>
            Header
        </header>
    </div>
</template>
<script>
    export default{
        name:'header'
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css"> //加入scoped属性，样式只控制当前模块
    header{
        text-align: center;
        font-size:30px;
        font-weight:bold;
    }
</style>

footer.vue

<template>
    <div id="footer">
        <footer>
            Footer
        </footer>
    </div>
</template>
<script>
    export default{
        name:'footer'
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css"> //加入scoped属性，样式只控制当前模块
    footer{
        text-align: center;
        font-size:30px;
        font-weight:bold;
    }
</style>

src/components/main

新建main.js导出我们的这两个模块

export header from './header.vue';
export footer from './footer.vue';

src/components

新建first/first.vue

<template>
    <div id="first">
        <mainHeader></mainHeader>
        <div class="main">这里是first</div>
        <div class="main-link">
            <router-link to="/first">Go to first</router-link>
        </div>
        <div class="main-link">
            <router-link to="/second">Go to second</router-link>
        </div>
        <mainFooter></mainFooter>
    </div>
</template>
<script>
    import * as main from '../main/main'; //导入刚才注册的两个模块
    export default{
        name:'first',

        components:{ //注册组件为当前模块的子模块
            mainHeader:main.header,
            mainFooter:main.footer
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    .main{
        text-align: center;
        font-size:16px;
        margin: 50px;
    }
</style>

src/components

新建first/second.vue

<template>
    <div id="second">
        <mainHeader></mainHeader>
        <div class="main">这里是second</div>
        <div class="main-link">
            <router-link to="/first">Go to first</router-link>
        </div>
        <div class="main-link">
            <router-link to="/second">Go to second</router-link>
        </div>
        <mainFooter></mainFooter>
    </div>
</template>
<script>
    import * as main from '../main/main'; //导入刚才注册的两个模块
    export default{
        name:'second',

        components:{ //注册组件为当前模块的子模块
            mainHeader:main.header,
            mainFooter:main.footer
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    .main{
        text-align: center;
        font-size:16px;
        margin: 50px;
    }
</style>

src/components

新建first/main.js导出模块

export const first = r => {
    require(['./first.vue'], r)
};

export const second = r => {
    require(['./second.vue'], r)
};

//这个导出方法是将模块转化为函数，按需加载需要的资源

src/router.js

创建路由入口以及重定向

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import * as main from 'src/components/first/main.js'; //导入模块

const routes = [
    {path:'/',redirect: '/first'}, //重定向路由
    {
        path:'/first',
        component:main.first
    },
    {
        path:'/second',
        component:main.second
    }
];



export const router = new VueRouter({
// mode: 'history',
    routes // （缩写）相当于 routes: routes
});

现在打开浏览器 输入localhost:8080看看效果吧，注意链接的变化，vue-router的简单使用就是这样

• vue-router官方文档