Vue Router跳转无效求助！

main.js

import Vue from 'vue'
import VueRouter from 'router" title="vue-router">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

回答

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

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

以上是 Vue Router跳转无效求助！ 的全部内容， 来源链接： utcz.com/a/26736.html

回到顶部