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



修改了parmater的vue.config.js文件后host到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
};
},
});

文件-vu.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

文件主.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')

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

最新更新