问答

Vue Router跳转无效求助!

作者:admin 2021-07-13 我要评论

main.js import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue';import requests from './components/basejs/new-axios.js' // ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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>

image.png

点击后
image.png

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

###

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

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Vue Router跳转无效求助!

    Vue Router跳转无效求助!

  • .ts文件识别不了.vue 文件

    .ts文件识别不了.vue 文件

  • typescript 常量的最佳实践

    typescript 常量的最佳实践

  • 想求各列,由负转正数或正转负的行数

    想求各列,由负转正数或正转负的行数

腾讯云代理商
海外云服务器