Visual studio Vue路由器，设置为打开外部链接。。。当时正在工作，现在它'；不是…我该去哪里弄清楚我改变了什么？
我在router/index.ts中设置了几个这样的路由，因此它将打开一个新的外部链接窗口Visual studio Vue路由器，设置为打开外部链接。。。当时正在工作，现在它'；不是…我该去哪里弄清楚我改变了什么？,visual-studio,vue.js,vue-router,Visual Studio,Vue.js,Vue Router,我在router/index.ts中设置了几个这样的路由，因此它将打开一个新的外部链接窗口 { name: "0365Direct2", path: 'https://portal.office.com', beforeEnter() { window.open('https://portal.office.com', '_blank'); }
{
name: "0365Direct2",
path: 'https://portal.office.com',
beforeEnter() {
window.open('https://portal.office.com',
'_blank');
}
}
<router-link class="pa-2" pr-2 to="/0365Direct">0365 Direct</router-link> |
<template>
<div><!--id-"app"-->
<v-app>
<v-app-bar app>
<router-link class="pa-2" to="/">Home</router-link> |
<!--<router-link class="pa-2" to="/about">About</router-link> |-->
<router-link class="pa-2" to="/StudentPasswordSet">StudentPasswordSet</router-link> |
<router-link class="pa-2" pr-2 to="/StudentPortalData">StudentPortalData</router-link> |
<router-link class="pa-2" pr-2 to="/GetStudentInfo">GetStudentInfo</router-link> |
<router-link class="pa-2" pr-2 to="/GetStudentInfoSingleFile">GetStudentInfoSingleFile</router-link> |
<!--<router-link class="pa-2" pr-2 to="#" v-on:click.prevent="login" v-if="!user">StudentPortalData</router-link> |-->
<router-link class="pa-2" pr-2 v-if="user" to="/StudentPortalDlSched">Stud DL Sched</router-link> |
<router-link class="pa-2" pr-2 to="/StudentPortalDlSchedTS">Stud DL Sched TS</router-link> |
<!--<a href="https://dev-236765.okta.com/home/google/0oa3mblbqpfFuNHjx357/54" target="_blank"> Calendar </a> |
<a href="https://dev-236765.okta.com/home/google/0oa3mblbqpfFuNHjx357/50" target="_blank"> GMail </a> |
<a href="https://classroom.google.com" target="_blank"> Google Classroom</a> |
<a href="https://dev-236765.okta.com/home/office365/0oa164ehoco8kRUHL4x7/30781" target="_blank"> 0365 </a> |-->
<a href="https://portal.office.com" target="_blank"> 0365 Direct</a> |
<!--<v-list-item href="https://portal.office.com" target="_blank">Google</v-list-item> |-->
<router-link class="pa-2" pr-2 to="/Calendar">Calendar</router-link> |
<router-link class="pa-2" pr-2 to="/GMail">GMail</router-link> |
<router-link class="pa-2" pr-2 to="/Classroom">Google Classroom</router-link> |
<router-link class="pa-2" pr-2 to="/0365">0365</router-link> |
<router-link class="pa-2" pr-2 to="/0365Direct">0365 Direct</router-link> |
<v-spacer></v-spacer>
<v-btn @click.prevent="login" color="primary" class="pa-2" v-if="!user">Login with Okta</v-btn>
<v-btn @click.prevent="logout" color="primary" class="pa-2" v-else>Logout</v-btn>
</v-app-bar>
<v-card outlined class="pa-10 to accent2 lighten-4 " color="#f2f2f2" v-if="user">
<!--<v-divider></v-divider>-->
<v-row class="ma-2" wrap>
<v-col cols="12" md="6" v-if="user">
<!--{{user}}-->
{{user.preferred_username}}
</v-col>
<v-col cols="12" md="6" v-else>
USER IS NOT LOGGED IN
</v-col>
</v-row>
</v-card>
<v-main>
<v-container fluid>
<router-view />
</v-container>
</v-main>
</v-app>
</div>
</template>
<!-- to logout call this.$auth.logout() - EWB
below sets up Okta auth in the vue app scripts
-->
<script>
export default {
name: 'app',
data () {
return {
user: null
}
},
async created() {
await this.refreshUser()
},
watch: {
'$route': 'onRouteChange'
},
methods: {
login() {
this.$auth.loginRedirect()
},
async onRouteChange() {
// every time a route is changed refresh the user details
await this.refreshUser()
},
async refreshUser() {
// get new user details and store it to user object
this.user = await this.$auth.getUser()
},
async logout() {
//await
await this.$auth.logout();// if I await this, it just hangs - EWB
//await this.isAuthenticated();
await this.refreshUser();
this.$router.push('/');
//alert(window.location.href);
//window.location.href = "https://appengine.google.com/_ah/logout?continue=" + window.location.href.replace("http://","");//; causes redirect notice - EWB
//force logout of googleand redirect back to here "https://appengine.google.com/_ah/logout?continue="+window.location.pathname;;
//if (this.$route.path !== '/') this.$router.push({
// path: '/'
//}
}
},
}</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 60px;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
#row {
margin: 10px;
}
</style>
家|
学生密码集|
学生门户数据|
获取学生信息|
GetStudentInfoSingleFile|
双头螺栓|
双头螺栓螺栓|
|
历法|
GMail|
谷歌教室|
0365 |
0365直接|
使用Okta登录
注销
{{user.preferred_username}}
用户未登录
导出默认值{
名称：“应用程序”，
数据（）{
返回{
用户：空
}
},
异步创建（）{
等待此消息。refreshUser（）
},
观察：{
“$route”：“onRouteChange”
},
方法：{
登录（）{
这是。$auth.loginDirect（）
},
异步onRouteChange（）{
//每次更改路由时，请刷新用户详细信息
等待此消息。refreshUser（）
},
异步刷新用户（）{
//获取新用户详细信息并将其存储到用户对象
this.user=等待此操作。$auth.getUser（）
},
异步注销（）{
//等待
等待此消息。$auth.logout（）；//如果我等待此消息，它将挂起-EWB
//等待此消息。isAuthenticated（）；
等待此消息。刷新用户（）；
这个.$router.push（'/'）；
//警报（window.location.href）；
//window.location.href=”https://appengine.google.com/_ah/logout?continue=“+window.location.href.replace”（“http://”，”）；//；导致重定向通知-EWB
//强制注销googleand并重定向回此处“https://appengine.google.com/_ah/logout?continue=“+window.location.pathname；”；；
//如果（this.$route.path！='/'）this.$router.push({
//路径：'/'
//}
}
},
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
利润率：60像素；
}
#导航{
填充：30px；
}
#导航a{
字体大小：粗体；
颜色：#2c3e50；
}
#导航a.路由器-链路-精确-活动{
颜色：#42b983；
}
#划船{
利润率：10px；
}
我是vue新手，如果它不在这两个文件中的任何一个文件中，我不知道从何处查找，以找出我更改了哪些文件来破坏它。我们将提供帮助或建议。尝试删除斜杠并将其与name属性匹配：
to=“0365Direct2”路由器链接，只需按按钮打开链接即可。此外，我建议在VueJS论坛上发布尝试删除斜杠并将其与name属性匹配： to=“0365Direct2”
没有乐趣，与从“to”字段中删除的\的行为完全相同。谢谢！不确定您要查找的确切行为，但我相信您可以完全放弃路由器链接
，只需按一下按钮打开链接。此外，我建议在VueJS论坛上发布
<template>
<div><!--id-"app"-->
<v-app>
<v-app-bar app>
<router-link class="pa-2" to="/">Home</router-link> |
<!--<router-link class="pa-2" to="/about">About</router-link> |-->
<router-link class="pa-2" to="/StudentPasswordSet">StudentPasswordSet</router-link> |
<router-link class="pa-2" pr-2 to="/StudentPortalData">StudentPortalData</router-link> |
<router-link class="pa-2" pr-2 to="/GetStudentInfo">GetStudentInfo</router-link> |
<router-link class="pa-2" pr-2 to="/GetStudentInfoSingleFile">GetStudentInfoSingleFile</router-link> |
<!--<router-link class="pa-2" pr-2 to="#" v-on:click.prevent="login" v-if="!user">StudentPortalData</router-link> |-->
<router-link class="pa-2" pr-2 v-if="user" to="/StudentPortalDlSched">Stud DL Sched</router-link> |
<router-link class="pa-2" pr-2 to="/StudentPortalDlSchedTS">Stud DL Sched TS</router-link> |
<!--<a href="https://dev-236765.okta.com/home/google/0oa3mblbqpfFuNHjx357/54" target="_blank"> Calendar </a> |
<a href="https://dev-236765.okta.com/home/google/0oa3mblbqpfFuNHjx357/50" target="_blank"> GMail </a> |
<a href="https://classroom.google.com" target="_blank"> Google Classroom</a> |
<a href="https://dev-236765.okta.com/home/office365/0oa164ehoco8kRUHL4x7/30781" target="_blank"> 0365 </a> |-->
<a href="https://portal.office.com" target="_blank"> 0365 Direct</a> |
<!--<v-list-item href="https://portal.office.com" target="_blank">Google</v-list-item> |-->
<router-link class="pa-2" pr-2 to="/Calendar">Calendar</router-link> |
<router-link class="pa-2" pr-2 to="/GMail">GMail</router-link> |
<router-link class="pa-2" pr-2 to="/Classroom">Google Classroom</router-link> |
<router-link class="pa-2" pr-2 to="/0365">0365</router-link> |
<router-link class="pa-2" pr-2 to="/0365Direct">0365 Direct</router-link> |
<v-spacer></v-spacer>
<v-btn @click.prevent="login" color="primary" class="pa-2" v-if="!user">Login with Okta</v-btn>
<v-btn @click.prevent="logout" color="primary" class="pa-2" v-else>Logout</v-btn>
</v-app-bar>
<v-card outlined class="pa-10 to accent2 lighten-4 " color="#f2f2f2" v-if="user">
<!--<v-divider></v-divider>-->
<v-row class="ma-2" wrap>
<v-col cols="12" md="6" v-if="user">
<!--{{user}}-->
{{user.preferred_username}}
</v-col>
<v-col cols="12" md="6" v-else>
USER IS NOT LOGGED IN
</v-col>
</v-row>
</v-card>
<v-main>
<v-container fluid>
<router-view />
</v-container>
</v-main>
</v-app>
</div>
</template>
<!-- to logout call this.$auth.logout() - EWB
below sets up Okta auth in the vue app scripts
-->
<script>
export default {
name: 'app',
data () {
return {
user: null
}
},
async created() {
await this.refreshUser()
},
watch: {
'$route': 'onRouteChange'
},
methods: {
login() {
this.$auth.loginRedirect()
},
async onRouteChange() {
// every time a route is changed refresh the user details
await this.refreshUser()
},
async refreshUser() {
// get new user details and store it to user object
this.user = await this.$auth.getUser()
},
async logout() {
//await
await this.$auth.logout();// if I await this, it just hangs - EWB
//await this.isAuthenticated();
await this.refreshUser();
this.$router.push('/');
//alert(window.location.href);
//window.location.href = "https://appengine.google.com/_ah/logout?continue=" + window.location.href.replace("http://","");//; causes redirect notice - EWB
//force logout of googleand redirect back to here "https://appengine.google.com/_ah/logout?continue="+window.location.pathname;;
//if (this.$route.path !== '/') this.$router.push({
// path: '/'
//}
}
},
}</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 60px;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
#row {
margin: 10px;
}
</style>