vue2.0学习笔记（八）：vue-router 路由配置（1）--基础篇

安装vue-router 路由

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：可以通过第二步/第三步的方式安装加载

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

Vue.use(VueRouter)

编写 路由地址文件 （./router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
// 1. 定义（路由）组件。
import demo01 from '../components/demo01/demo01'
import demo02 from '../components/demo02/demo02'
import demo03 from '../components/demo03/demo03'
import demo04 from '../components/demo04/demo04'
import demo05 from '../components/demo05/demo05'
Vue.use(Router)

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
export default new Router({
    routes: [
        {
            path: '/',
            name: 'demo01',
            component: demo01
        },
        {
            path: '/demo01',
            name: 'demo01',
            component: demo01
        },
        {
            path: '/demo02',
            name: 'demo02',
            component: demo02
        },
        {
            path: '/demo03',
            name: 'demo03',
            component: demo03
        },
        {
            path: '/demo04',
            name: 'demo04',
            component: demo04
        },
        {
            path: '/demo05',
            name: 'demo05',
            component: demo05
        },
        
    ]
})

main.js 中引入并注册router

// 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 ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//引入组件Header,并组册为全局组件
import Header from './assets/header/header.vue';
Vue.component('Header',Header)

//引入vue-router,并在new Vue 中安装加载
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

编写视图入口:

在app.vue中不在直接引入独立的文件组件，而是把文件变成一个新的起始出口，通过路由匹配到的组件将渲染在这里，在这里需要理解<router-link/><router-view>两个标签的具体含义，一个入口，一个出口，我们把页面分为两个部分，左侧是入口，右侧是出口

<template>
    <div id="app">
        <!--第三步 在template 中渲染组件-->
        <!-- <Demo01/>
                      <hr>
                      <Demo02/>
                      <hr>
                      <Demo03/>
                      <hr> -->
        <!-- <Demo04/> -->
        <!-- <Demo05/> -->
    
        <Header/>
    
        <div class="container">
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <ul class="app_left">
            <li v-for="(item) in linkList" :key="item.routerName">
                <router-link :to="{ name: item.routerName }">Go to {{item.routerName}}</router-link>
            </li>
        </ul>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <div class="app_right">
            <router-view></router-view>
        </div>
    </div>
    
    
    </div>
</template>

<script>
    //第一步 引入Demo01 组件
    // import Demo01 from './components/demo01/demo01'
    // import Demo02 from './components/demo02/demo02'
    // import Demo03 from './components/demo03/demo03'
    // import Demo04 from './components/demo04/demo04'
    // import Demo05 from './components/demo05/demo05'
    export default {
        name: 'App',
        data() {
            return {
                linkList: [{
                        routerName: 'demo01',
                        name: 'demo01'
                    },
                    {
                        routerName: 'demo02',
                        name: 'demo02'
                    },
                    {
                        routerName: 'demo03',
                        name: 'demo03'
                    },
                    {
                        routerName: 'demo04',
                        name: 'demo04'
                    },
                    {
                        routerName: 'demo05',
                        name: 'demo05'
                    },
                ]
            };
        },
        //第二步 在components 中注册组件
        components: {
            // Demo01,
            // Demo02,
            // Demo03,
            // Demo04,
            // Demo05
        }
    }
</script>

<style lang="less">
    .app_left {
        width: 300px;
        float: left;
        border: 1px solid #000000;
        height: 600px;
        li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #000000;
        }
    }
    
    .app_right {
        width: calc(100% - 400px);
        float: right;
    }
</style>

这样一个基础的路由就写好啦，可以去github上下载查看，持续更新中，有问题联系 [email protected]