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;
        });
    }
};

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

解决办法
在这里插入图片描述

最后结果显示 能够得到该网页爬取的数据

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐