Vue中的路由器不起作用答案

【问题标题】：Router in Vue not workinVue中的路由器不起作用
【发布时间】：2021-06-27 03:52:44
【问题描述】：

我已经尝试了 100 次，但我的路由器根本无法工作！我不能只是导航或切换到我的 vue 项目中的不同页面。我也按照链接https://www.thepolyglotdeveloper.com/2017/11/router-navigate-pages-vuejs-application/ 中给出的所有步骤进行操作，但没有任何变化。

这是我的代码：

main.js

import Vue from 'vue'
import App from './App.vue'
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
//import router from '../router'
//import VueRouter from 'vue-router'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Page1"
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1
        },
        {
            path: '/page2',
            name: 'Page2',
            component: Page2
        }
    ]
})

现在这是我的一个页面的示例，我希望它的地址是 localhost:8080/page1 但它没有出现..

<template>
<div class="hello">
    <h1>{{ msg }}</h1>
     <router-link to="/page2">Navigate to Page2</router-link>
</div>
</template>

<script>
    export default {
        name: 'Page1',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>

有人请告诉我该怎么做

【问题讨论】：

你可以尝试在 app.vue 中的组件模板中添加吗？？

标签： html vue.js vue-router

【解决方案1】：

您的main.js 必须如下所示：

import Vue from 'vue'
import App from './App.vue'
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import router from '../router';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

同样在App.vue 中你必须有<RouterView />：

<template>
  <RouterView />
</template>

来源：https://router.vuejs.org/guide/#html

【讨论】：