vue.js - 防止 url 出现或修改当前地址栏值
问题描述
我有这个 vue js 脚本
const NotfoundComponent = {
template: '<h1>Not found</h1>'
};
const HomeComponent = {
template: '<h1>Home</h1>'
};
const AboutComponent = {
template: '<h1>About</h1>'
};
const routes = [
{
path: '/',
component: HomeComponent
},
{
path: '/about',
component: AboutComponent
},
{
path: '*',
component: NotfoundComponent
}
];
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router
});
使用 vue-router。我在 spring mvc 应用程序内的 jsp 页面内运行 vue js。我想正常加载由码头提供的jsp页面,并且只使用vue js路由器在页面内的组件之间导航。
我有路由器设置并在页面内工作,但是在链接点击时,我不想要任何这个 vue js 链接
<div id="app">
<router-link to="/">home</router-link>
<router-link to="/about">about</router-link>
<router-link to="/something">no route</router-link>
<router-view></router-view>
</div>
修改当前地址栏或添加任何新内容。
可以使用 vue js 完成吗?
解决方案
你想要' abstract
'模式。
const router = new VueRouter({
mode: 'abstract',
routes
});
这需要您推送一个初始 URL:
// you main Vue instance
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
mounted() {
this.$router.replace('/') // added this
}
})
推荐阅读
- javascript - 使用文本字段输入在 iframe 中执行全局函数
- angular - 如何更改 Observable 的成员对象字段的值?
- swift - ARKit – 使用 SCN 文件 > 300 MB 时出现“意外发现 nil”
- c# - 如何找到贝塞尔曲线的控制点?
- google-colaboratory - 尝试将数据从磁盘加载到 Google Collab 时出错
- android-studio - 为什么我的 android 应用程序名称显示这个.. androidx.multidex .....?请看图片
- cordova - 使用 Admob 在 cordova 应用上添加广告
- reactjs - 索环中不同断点的 edgeSize 问题
- javascript - 未捕获的引用错误:函数 StartOver() 未在 HTMLButtonElement.onclick 中定义
- c++ - 在成对的“std::vector”上使用“std::count”的意外行为