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