vue2.0學習筆記（八）：vue-router 路由配置（1）--基礎篇

https://github.com/zhanglingn... github連接地址

https://router.vuejs.org/zh-c... vue-router 官方地址

安裝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上下載查看，持續更新中，有問題聯繫 zhanglnb@seentao.com