vue-router的安装及配置

先上效果图

配置完毕后，访问BeautyNumber与访问YiYuanNumber，是两个不同的页面即为成功
http://localhost:8080/landing/#/BeautyNumber

http://localhost:8080/landing/#/YiYuanNumber

1.安装vue-router

npm install --save vue-router

2.创建views目录，创建两个vue页面

BeautyNumber.vue

<template>
    <van-button type="danger">危险按钮</van-button>
</template>

<script>
    export default {
        name: "BeautyNumber"
    }
</script>

<style scoped>

</style>

YiYuanNumber.vue

<template>
    <van-button plain hairline type="primary" @click="queryMusician()">细边框按钮</van-button>
</template>

<script>
    export default {
        name: "YiYuanNumber"
    }
</script>

<style scoped>

</style>

3.创建router目录，配置index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

export default new VueRouter({
    base: '/landing/',
    routes: [
        {
            name: '靓号',
            path: '/BeautyNumber',
            component: ()=>import('@/views/BeautyNumber')
        },
        {
            name: '一元号码',
            path: '/YiYuanNumber',
            component: ()=>import('@/views/YiYuanNumber')
        },
    ]
})

4.main.js配置 router

5.在App.vue添加路由标签

<router-view></router-view>

6.测试

使用启动命令：npm run serve
页面输入:http://localhost:8080/landing/#/BeautyNumber

页面输入:http://localhost:8080/landing/#/YiYuanNumber