vue.js - 如何使用 vue-router 进行重定向?
问题描述
我试图通过 url 访问其他页面,但这些页面永远不会加载
这是我的 main.js 文件
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Index from './views/Index';
const About = { template: '<p>about page</p>' }
const routes = [
{ path: '/index', name: 'index', component: Index },
{ path: '/about', name: 'about', component: About }
]
var router = new VueRouter({
routes: routes,
mode: 'history'
})
new Vue({
router: router,
vuetify,
render: h => h(App)
}).$mount('#app')
有人可以帮助我使用 vue-router 吗?我是这个框架的新手
解决方案
如果您像这样访问它们,它是否有效:
如果是,您vue-router
正在使用默认的hash-mode。要摆脱哈希并获得“正常” URL,您需要将其设置为history mode。
编辑:
如我所见,您已经在使用历史模式。您是否使用 Vue CLI 进行本地开发?这通常应该是开箱即用的。如果没有,您需要在其他 Web 服务器上设置一些重定向规则。请在此处查看示例:示例服务器配置
编辑2:
你能展示你的App
组件吗?我试图在沙箱中重现您的问题,但它有效:https ://codesandbox.io/s/confident-voice-zyg07
这里的App
组件看起来像这样,包括路由器视图:
<template>
<div id="app">
<router-view id="page"/>
</div>
</template>
<script>
export default {
name: "App",
components: {}
};
</script>
推荐阅读
- react-native - 如何仅使用 react-native-navigation v2 隐藏一个选项卡上的底部选项卡栏?
- javascript - Vue 应用程序的 Heroku 构建由于(错误地)丢失文件而失败。为什么?
- excel - 将文本从文本框复制到剪贴板
- php - 找不到类“PDF”-Laravel 5.4
- python - 在 Keras 上正确构建模型
- swift - PDFAnnotation 仅在编辑时出现
- python - 类属性中的 Python 循环导入
- google-apps-script - 如何格式化 Sheets.Spreadsheets.batchUpdate(resource, spreadsheetId) 的资源以创建列组
- java - 为什么一个类能够转换一个只有运行时错误但没有编译器错误的不相关类
- java - 尝试在控制器内切换场景并返回 InvocationTargetException