Vue Router跳转无效求助！

Question

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue';
import requests from './components/basejs/new-axios.js'  // 记得改为你的路径
import routeConfig from './router.confing.js'
Vue.prototype.rq = requests  // 此处命名为rq,你可以改
Vue.config.productionTip = false
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',//添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，
  routes: routeConfig
});
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

router.confing.js
代码

import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/detail'
const routers =  [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld,
            meta:{
                title:'HelloWorld'
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component:Detail
        }
      ];
export default routers

HelloWorld.vue
代码

<router-link to="detail">详情页</router-link>

点击后

没有任何报错，也没有跳转到 detail.vue

Answer 1

哈哈，我以前也有遇到过类似的情况，初步估计原因，可能是模板上没有定义<router-view></router-view>，导致vue-router即使知道你要去detail页，也不知道渲染在哪里。
你看下模板文件是否写这样：

<div id="app">
    <router-view></router-view>
</div>