vue 路由

2021-11-28
V2

本文最后更新于2022.05.14-16:22，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

注意，先下载  axios

npm install axios

博客静态页面

<!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>

项目结构图

  1. router：用于路由配置

  2. pages：存放路由组件

  3. components：存放组件

  4. main.js：用于引入配置

跨域配置

'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
  }
}

App.vue

<template>
  <div id="app">
    <Navigation></Navigation>
  </div>
</template>

<script>
import Navigation from './components/Navigation.vue'

export default {
  name: 'App',
  components: {//注册组件
    Navigation
  }
}
</script>

民生组件（路由组件）

<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>

路由配置

//该文件专门用来创建和管理整个应用的路由器
import VueRouter from "vue-router"
import AllLabels from "../pages/AllLabels"
import PeoplesLH from "../pages/PeoplesLH"

//创建并暴露一个路由器
export default new VueRouter({
    //地址和组件的对应关系
    routes:[
        {
            path:'/alllabels',//地址
            component:AllLabels//组件
        },
        {
            path:'/peopleslh',//地址
            component:PeoplesLH//组件
        }
    ]
})

全部组件（一般组件components）

<template>
    <div class="content">
        <h1>这是全部标签</h1>
    </div>
</template>

<script>
export default {
    name:'AllLabels'
}
</script>

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

导航条组件（一般组件components）

<template>
  <div class="title">
        <span>热门标签</span>
        <span>点击即可查看本区标签的相关内容</span>
        <ul>
            <!-- active-class 被激活的样式 -->
            <li>
                <router-link to="/alllabels" active-class="current">全部标签</router-link>
            </li>
            <li>
                <router-link to="/peopleslh" active-class="current">民生</router-link>
                <!-- <a href="#/peopleslh">民生</a> -->
            </li>
            <li>
                <a href="">社会</a>
            </li>
            <li>
                <a href="">日常</a>
            </li>
            <li>
                <a href="">终南山</a>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Navigation'
}
</script>

<style scoped>
.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;
    }
</style>

main.js 引入路由配置使用，使用路由插件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//上面的步骤等于<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
import App from './App'
//npm i vue-router
//导入路由
import VueRouter from 'vue-router'
//引入路由配置
import router from './router'

//vue使用路由插件
Vue.use(VueRouter);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },//注册
  router:router,//new vue对象的时候装配在上面
  template: '<App/>'//在指定作用域添加模板标签
})
阅读剩余
版权声明：
作者：涛哥
链接：https://ltbk.net/front/vue/v2/article/154.html
文章版权归作者所有，未经允许请勿转载。
THE END
axiosCSShtmlJavaScriptvue.js
vue.js插槽的学习（slot）
<<上一篇
vue.js之vuex
下一篇>>
相关推荐
Vue三级路由不跳转解决方案以及动态路由
Vue 搭建部署迷你服务器和打包上线项目
ElementUi的使用
vue 路由守卫和实现在新窗口打开
vue 二级路由和路由传参
解决vue Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.和ERROR in Cannot find module 'node-sass'
websocket聊天室
VueUI
本站稳定运行