vue2 的VueRouter配置

一, 导入router路由插件:

---------------------------
* npm i vue-router@3
---------------------------

二, 导入main.js配置路由:

---------------------------
import Vue from 'vue'
import App from './App.vue'
// 路由导入
import VueRouter from 'vue-router'
import router from './router/index.js'
Vue.config.productionTip = false
// 应用路由
Vue.use(VueRouter)
new Vue({
render: h => h(App),
// 这个地方配置前,需要在 vue-cli 的src目录下创建 router/index.js文件
router,
}).$mount('#app')
---------------------------

三, 导入index.js配置路由:

---------------------------
/**
* 配置路由
*/
import VueRouter from 'vue-router'
/* Head, Body 是自己创建的文件 */
import Head from './components/Head.vue'
import Body from './components/Body.vue'
export default new VueRouter({
    routes:[
        {
            path:'/head', /* 这个地方随便起名字,一般是下面的小写 */
            component: Head,
        },
        {
            path:'/body',
            component: Body,
        },
    ],
})
---------------------------

四, App.vue 配置

<template>
<div id="app">
    <div class="button">
    <router-link class="btn btn-outline-primary" active-class="" to="/aaa">a样式</router-link>
    <br />
    <router-link class="btn btn-outline-dark" active-class="" to="/bbb"
        >b样式</router-link
    >
    </div>
    <!-- 指定路由呈现位置 -->
    <router-view> </router-view>
</div>
</template>

<script>
import A from "./components/A.vue";
import B from "./components/B.vue";
export default {
name: "App",
components: { // 注册 A.vue B.vue
    A,B,
},
};
</script>

<style>
#app{
    margin-left: 48%;
}
</style>