7.vwe开发之支持vue-router

支持vue页面跳转

工具：vue-router

什么是vue-loader

官网

Vue Router is the official router for Vue.js.
It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

其实简单来说就是：一个简单的实现html跳转的兼容vue的辅助工具。

让项目支持vue-loader

1. 安装

npm i --save-dev vue-router

新建./src/components目录，新建两个.vue文件blog-list.vue,代码如下

<template>
    <div>
        <p>
            welcome to blog list page. <strong>blog-list</strong>
        </p>
    </div>
</template>

<script>
  export default {
    name: "blog-list"
  }
</script>

<style scoped>

</style>

blog-view.vue

<template>
    <div>
        <table>
            <thead>
            <tr>
                <th>name</th>
                <th>context</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>asa-x</td>
                <td>this is a blog!</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
  export default {
    name: "blog-view.vue"
  }
</script>

<style scoped>

</style>

定义一个保存vue路径文件夹-router，新建一个文件index.js，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import BlogList from '../components/blog-list.vue'
import BlogView from '../components/blog-view.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/blog-list',
      name: 'BlogList',
      component: BlogList
    },
    {
      path: '/blog-view',
      name: 'BlogView',
      component: BlogView
    }
  ]
})

在App.vue中引入router/index.js，修改代码如下：

<template>
    <div>
        <ul>
            <router-link to="/blog-list">list blog</router-link>
            <router-link to="/blog-view">view blog</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
  import router from './router/index'

  export default {
    name: "App",
    router
  }
</script>

<style scoped>

</style>

这里两个关键点是：

1. router-view

<router-view></router-view> 显示路径指向的vue组件

2. router-link，提供路径

 <ul>
            <router-link to="/blog-list">list blog</router-link>
            <router-link to="/blog-view">view blog</router-link>
        </ul>

在app.vue中，引入router/index.js

  import router from './router/index'

在定义的app.vue组件中，引入router

 export default {
    name: "App",
    router
  }

重新编译

npm run buildDev

如果一切正常的话，那么没什么问题。启动服务器

npm run start

页面可以点击 blog-list blog-view,点击不同点可以显示该vue定义的页面内容。

8.vwe开发之axios向后台发送请求