vue不工作路由器链接不可点击答案

【问题标题】：vue not working router-link not clickablevue不工作路由器链接不可点击
【发布时间】：2021-09-13 06:16:54
【问题描述】：

修改参数的vue.config.js文件后托管到 web-dev.test.ru，以使用公共网络，因此从外部网络链接指向 localhost

路由停止工作，无法点击

分配路径的菜单组件元素

<nav  class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
            <router-link  v-for="m in menu" :key="menu.id"  class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                 :to="m.url"> {{m.name}} <IconComponent style="float: right" :width="16" :height="16" :iconsvg="ic(m.icon)"></IconComponent></router-link>
          </nav>
        </div>    
    </template>
    <script lang="ts">
    import { defineComponent, PropType,  } from "vue";
    import { UsersInterface } from "@/models/interfaces/Users.interface";
    import menu from "../../../public/static/data/menu.json"
    import IconComponent from "@/components/icons/Icons.component.vue";
    import RootState from "@/store/root"
    
    export default defineComponent({
      components: {
                IconComponent
      },
      props: {
       
      },
    emits: ['selectmenu'],
      setup(props, {emit}) {
    
        const onUserSelect = (user: UsersInterface) => {
          user.selected = !user.selected;
        //  console.log("onUserSelect", user.IDuser, user.selected);
          emit('selectmenu', user)
        };
    
        const ic = (icon: string) => {
          console.log("onloadicons getters");
          return RootState.getters["iconStore/getSvg"]({ Nameicon: icon });
        };
    
        return {
          onUserSelect,
          menu,
          ic
        };
      },
    });

文件 - vue.config.js

module.exports = {
    devServer: {
        proxy: 'http://localhost:89/',
        host: 'web-dev.test.ru',
        port: '8080',
        public: 'http://web-dev.test.ru:8080',
        disableHostCheck: true,
        overlay: {
            warnings: true,
            errors: true
        }
        
    },
    configureWebpack: {
        devtool: 'source-map'
    }
}

包含我的应用程序路由的文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import Auth from '../views/Auth.vue'
import RootState from '../store/root'
import Inbox from '../views/Inbox.vue'
import Outbox from '../views/Outbox.vue'
import Load from '../views/Load.vue'

const routes: Array<RouteRecordRaw> = [

  {
    path: '/auth',
    name: 'Auth',
    component: Auth,
  },

  {
    path: '/main',
    name: 'Home',
    component: Home
  },



  {
    path: '/inbox',
    name: 'Inbox',
    component: Inbox

  },

  {
    path: '/outbox',
    name: 'Outbox',
    component: Outbox


  }
]



const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

文件 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import RootState from './store/root'

import './index.css'
//sync(RootStore, router) 
createApp(App).use(RootState).use(router).mount('#app')

【问题讨论】：

标签： typescript vue.js npm

【解决方案1】：

我被告知在 App.vue 文件的应用程序主文件中查看标签 <router-view></router-view>

【讨论】：