Vue：（三十五）路由vue-router

今天，我们开始学习vue中一个很关键的知识点，路由。

理解

vue的一个插件库，专门用来实现SPA应用

1. 单页web应用

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

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

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

下来，看一下工程结构：

这里注意一下，我们为了区分一般组件和路由组件，会统一把路由组件放在pages目录下。

首先，我们要先安装vue-router插件：npm -i vue-router，这里需要注意版本的问题

然后在main.js中导入并使用路由：

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入路由器
import router from './router/index'

//关闭Vue的生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

创建路由规则：

router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'

//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
    },
    {
      path: '/home',
      component: Home,
    },
  ],
})

接下来创建路由组件：

About.vue

<template>
  <div>
    <h2>我是About</h2>
  </div>
</template>

<script>
  export default {
    name: 'About',
  }
</script>

<style>
</style>

Home.vue

<template>
  <div>
    <h2>我是Home</h2>
  </div>
</template>

<script>
  export default {
    name: 'Home',
  }
</script>

<style>
</style>

最后，在app.vue中引入并使用路由组件，进行相关的操作

App.vue

<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link class="list-group-item" active-class="active"
                       to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active"
                       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>
  import Banner from './components/Banner.vue'
  export default {
    name: 'App',
    components: { Banner },
  }
</script>

结果如下：

以上就是用过一个案例来使用vue-router。

我是空谷有来人，谢谢支持。