Vue——URl重定向+使用Ajax库-axios

1. URl重定向

重定向指令：redirect
路由别名：alias

App.vue

<p>
<router-link to="/">Home</router-link>
<router-link to="about/">About</router-link>
<router-link to="/player/1">player</router-link>
<router-link to="/curry">Curry</router-link>
</p>

router/index.js

{
path: '/about',
name: 'About',
component: About,
alias: 'aboutme'
},
{
path: '/curry',
redirect: 'player/1'
// redirect: {name :'About'}
// redirect: '/about'
}

结果点击切换
在这里插入图片描述

2. 使用Ajax库-axios

为网页增加远程数据存取能力（Ajax）
HTTP库axios（浏览器 or Node.js）服务端开发也能使用
http://github.com/axios/axios

$ cd myweb
进入项目目录

$npm install --save --save-exact axios vue-axios
精确版本号
在这里插入图片描述

import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios, axios) 注册到vue的全局组件中
拷贝到src目录下的main.js文件中
在这里插入图片描述

注册组件
1.

<pre>{{content}}</pre>

在src中的componebts的HelloWorld.vue中添加
可以把默认不需要的删除
在这里插入图片描述
2.

export default{
    name:"HelloWorld",
    data(){
        return{
            content:""
    };
},
mounted(){
    this.axios.post("http://api.komavideo.com/news/list").then(body => {
        this.content = body.data;
        });
    }
};

替换原本的文件
在这里插入图片描述
。。。。。。。。。。。。。
中间报错了