1.vue-router路由的使用（页面跳转）

1.新建About.vue

<template>

  <div>About</div>

</template>

<script>

export default {}

</script>

<style>

</style>

2.新建Home.vue

<template>

  <div>Home</div>

</template>

<script>

export default {}

</script>

<style>

</style>

3.App.vue父组件

<template>

  <div>

      <div class="row">

          <div class="col-xs-offset-2 col-xs-8">

              <div class="page-header">

                  <h2>Router Basic -01</h2>

              </div>

          </div>

      </div>

    <div class="row">

          <div class="col-xs-offset-2 col-xs-8">

              <div class="list-group">

                  <!-- <a href="#/about" class="list-group-item router-link-exact-active activeClass">About</a>

                  <a href="#/home" class="list-group-item">Home</a> -->

                  <router-link to="./about" class="list-group-item">About</router-link>

                  <router-link to="./home" class="list-group-item">Home</router-link>

              </div>

          </div>

          <div id="col-xs-6">

            <div id="panel">

                <div id="panel-body">

                    <!-- <div>

                        <h2>about组件</h2>

                        <p>接受外部数据：谷歌</p><input type="text"/>

                    </div> -->

                <!-- 当前路由显示 -->

                <router-view></router-view>

                </div>

            </div>

        </div>

    </div>  

</div>

</template>

<script>

export default {

}

</script>

<style>

</style>

4.index.js

//路由器模块

//1.因为是vue的插件，所以先引入vue

import Vue from 'vue'

//2.引入路由

import VueRouter from 'vue-router'

//3.1引入路由

import About from '../views/About.vue'

import Home from '../views/Home.vue'

//3.插件使用

Vue.use(VueRouter)

//1.创建一个路由

export default new VueRouter({

    //2.写入n个路由

    routes:[

    //3.一个对象一个路由

    {

        path:'/about',

        component:About

    },

    {

        path:'/home',

        component:Home

    },

    //自动出现页面（重定向） 出现页面

    {

        path:'/',

        redirect:'./about'

    } ]

})

//main.js 入口文件引入路由

//1.先写路由组件，再把组件映射成路由（index.js）z中，然后再回到映射好的路路由组件当中

//写入显示标签：<router-link to="/about"></router-link>

//显示：<router-view></router-view>

5.main.js

//都是固定的

//1.使用vue的实例

import Vue from 'vue'

//使用App作为主模版，并且调用

import App from './App.vue'

//引入路由文件

import router from './router'

//任意取名的方式import router2 from './router'

//那么属性对象：router2：router 这是笨方法

//vue实例

new Vue({

    //连接到主页index的#app

    el:'#app',

    //组件声明

    components:{App},

    //模版声明

    template:'<App/>',

    //配置路由属性声明

    router

})

// 配置对象的属性名都是一些确定的名称，不能随便修改

element-ui有对应的组件直接使用