vue路由

晚上睡不着！

已于 2022-04-13 22:08:41 修改

阅读量44

点赞数

分类专栏： # Vue2.js 文章标签： vue.js

于 2021-10-20 17:30:13 首次发布

本文链接：https://blog.csdn.net/LT19990304/article/details/120870917

版权

Vue2.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

注意，先下载 axios

npm install axios

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
		body{
			background-color: #000000;
		}
		.title{
			width: 980px;
			height: 88px;
			background-color: #fff;
			margin: 0 auto;
		}
		.title span:nth-child(1){
			font-size: 18px;
			line-height: 24px;
			color: #222;
			vertical-align: middle;
		}
		.title span:nth-child(2){
			color: #99a2aa;
			margin-left: 20px;
			margin-bottom: 2px;
			display: inline-block;
			vertical-align: bottom;
		}
		.title ul{
			overflow: hidden;
			margin-right: -10px;
			list-style:none;
		}
		.title ul li{
			display: inline-block;
			float: left;
			position: relative;
			border: 1px solid #e5e9ef;
			border-radius: 12px;
			background-color: #fff;
			height: 22px;
			margin: 5px 10px 5px 0;
			cursor: pointer;
		}
		.title ul li a{
			display: block;
			line-height: 22px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			color: #222;
			padding: 0 10px;
			text-decoration: none;
			font-size: 10px;
		}
		.current{
			background-color: #00a1d6!important;
		}
		.current a{
			color:#FFFFFF!important;
		}
		
		.content{
			width: 980px;
			height: 500px;
			margin: 0 auto;
			background-color: #fff;
		}
		.content h1{
			text-align: center;
		}
	</style>
	</head>
	<body>
		<div id="app">
			<div class="title">
				<span>热门标签</span>
				<span>点击即可查看本区标签的相关内容</span>
				<ul>
					<li class="current">
						<a href="">全部标签</a>
					</li>
					<li>
						<a href="">民生</a>
					</li>
					<li>
						<a href="">社会</a>
					</li>
					<li>
						<a href="">日常</a>
					</li>
					<li>
						<a href="">终南山</a>
					</li>
				</ul>
			</div>
			
			<div class="content">
				<h1>一些内容</h1>
			</div>
		</div>
	</body>
</html>

跨域配置

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target : 'https://api.bilibili.com', //设置你调用的接口域名和端口号.别忘了加http
        changeOrigin : true, //允许跨域
        pathRewrite : {
          '^/api':''
        // '‘这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替。
        // 比如我要调用’http://127.0.0.1:8000/index/’，直接写‘/api/index/’即可
        },
        headers:{
            referer:"https://www.bilibili.com/v/information/social/"
        }
      }
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

民生组件

<template>
    <div class="content">
        <h1>这是民生组件</h1>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'PeoplesLH',
    beforeDestroy(){
        console.log("民生组件即将被销毁");
    },
    mounted(){
        var url = "http://localhost:8080/api/x/web-interface/dynamic/tag?jsonp=jsonp&pn=1&ps=5&rid=205&tag_id=434791&callback=jsonCallback_bili_735307830039846828";
        axios.get(url).then(
            response =>{
                console.log(response.data);
            },
            error =>{

            }
        )
        console.log("民生组件挂载完毕");
    }
}
</script>

<style scoped>
.content{
    width: 980px;
    height: 500px;
    margin: 0 auto;
    background-color: #fff;
}
.content h1{
    text-align: center;
}
</style>

晚上睡不着！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue路由

注意，先下载 axiosnpm install axios1.index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color: #000000; } .title{ width: 980px; height: .
复制链接

扫一扫