新建页面
我们把 components 改名为 views,并在 views 目录下添加三个页面,Login.vue,Home.vue,404.vue。
三个页面内容简单相似,只有简单的页面标识,如首页页面是 “Home Page”。
Home.vue,其他页面类似
<template>
<div class="page">
<h2>Home Page</h2>
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
安装vue-router
适合vue2的vue-router版本,请看vue-router releases
npm install vue-router@3.6.5 -S
配置路由
安装好vue-router
后,新建router目录及index.js文件。
打开 router/index.js,添加三个路由,分别对应主页、登录和404页面。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
}
,{
path: '/404',
name: 'notFound',
component: NotFound
}
]
})
最后在App.vue中加入路由出口。如图所示:
代码如下:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
访问路由
预处理器sass
Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。选择你熟悉的css预处理器。本项目使用sass。
# Sass
npm install -D sass-loader sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
安装 axios
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
npm install axios
在Home.vue中测试axios
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="getData">axios调用</el-button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HomePage',
methods: {
async getData() {
const res = await axios.get('http://localhost:8080')
alert(res.data)
}
}
}
</script>