SPA 应用的理解

1. 单页 Web 应用（single page web application，SPA）。

2. 整个应用只有一个完整的页面。

3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

4. 数据需要通过 ajax 请求获取。

官方文档

Vue Router | Vue.js 的官方路由 (vuejs.org)

安装：

如果报：Uncaught runtime errors: × ERROR Cannot read properties of undefined 这样的错误是版本的问题

这里用的vue2-cli

卸载当前版本的vue-router:npm uninstall vue-router

下载vue2兼容的vue-router版本npm install vue-router@3.5.2

main.js

//引入Vue

import Vue from 'vue'

//引入组件

import App from './App117.vue'

//引入vue-router

import VueRouter from 'vue-router'

//引入路由器

import router from './router/index'

//引入插件

import plugins from './plugins'

//引入store

import store from './store/index115.js'

//关闭生产提示

Vue.config.productionTip = false

//应用插件

Vue.use(plugins)

Vue.use(VueRouter)

//创建vm

const vm = new Vue({

    el: '#app',

    render: h => h(App),

    store: store,//简写store

    router:router,//路由器

    //全局事件总线

    beforeCreate() {

        Vue.prototype.$bus = this

    }

})

新建 src/router/index.js文件，这个存储的路由配置

import VueRouter from 'vue-router'

//引入组件

import About from '../components/117/About.vue'

import Home from '../components/117/Home.vue'

//创建路由器

export default new VueRouter({

    /*

    注意这里是routes不是routers不要写错了,

    否则router-view会失效，且控制台会报No routes found in router

    */

    routes:[

        {

            path:'/about',//路由

            component:About,//组件名

        },

        {

            path:'/home',//路由

            component:Home,//组件名

        },

    ]

})

App.vue

<template>

  <div class="app">

    <div class="row">

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

        <div class="page-header">

          <h2>Vue Router Demo</h2>

          <p>

            vue2版本安装：npm install vue-router@3.5.2

          </p>

        </div>

      </div>

    </div>

    <div class="row">

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

        <div class="list-group">

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

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

        </div>

      </div>

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

        <div class="panel">

          <div class="panel-body">

            <!--指定组件的呈现位置-->

            <router-view></router-view>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'App',

}

</script>

多级路由效果

index.js

import VueRouter from 'vue-router'

//引入组件

import About from '../components/117/About.vue'

import Home from '../components/117/Home.vue'

import News from '../components/117/News.vue'

import Message from '../components/117/Message.vue'

//创建路由器

export default new VueRouter({

    /*

    注意这里是routes不是routers不要写错了,

    否则router-view会失效，且控制台会报No routes found in router

    */

    routes:[

        {

            path:'/about',//路由

            component:About,//组件名

        },

        {

            path:'/home',//路由

            component:Home,//组件名

            children:[

                {

                    path:'news',//对应home/news

                    component:News,

                },

                {

                    path:'message',

                    component:Message,

                }

            ]

        },

    ]

})

home.vue

<template>

    <div><!--这个div不能少，不然编译会卡住-->

        <h2>我是Home的内容</h2>

        <div>

            <ul class="nav nav-tabs">

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

                </li>

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>

                </li>

            </ul>

            <router-view></router-view>

        </div>

    </div>

</template>

<script>

export default {

    name:'Home'

}

</script>

<style>

</style>

Message.vue

<template>

    <div>

        <ul>

        <li>

            <a href="/message1">message001</a>&nbsp;&nbsp;

        </li>

        <li>

            <a href="/message2">message002</a>&nbsp;&nbsp;

        </li>

        <li>

            <a href="/message/3">message003</a>&nbsp;&nbsp;

        </li>

        </ul>

    </div>

</template>

<script>

    export default {

        name:'Message'

    }

</script>

<style>

</style>

news.vue

<template>

    <ul>

        <li>news001</li>

        <li>news002</li>

        <li>news003</li>

    </ul>

</template>

<script>

    export default {

        name:'News'

    }

</script>

<style>

</style>