vue页面不能根据路径进行跳转的解决方法

 更新时间:2023年12月06日 14:31:03   作者:徐子元竟然被占了!!  
本文主要介绍了vue页面不能根据路径进行跳转的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

源码

app.vue文件

<template>
    <div id="app">
        
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

<style>

</style>

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/homeView',
    name: 'homeView',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

问题现象

我们创建了很多个页面,并且在路由文件补充页面的跳转路径。但在浏览器的地址栏输入不用链接,却不能访问相应的页面。

原因

vue没有渲染页面

解决

在app.vue补充

<template>
    <div id="app">
<!--补充的内容-->
        <router-view/>
<!--补充结束-->
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

<style>

</style>

到此这篇关于vue页面不能根据路径进行跳转的解决方法的文章就介绍到这了,更多相关vue 路径跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • vue中v-model和.sync修饰符的区别

    vue中v-model和.sync修饰符的区别

    在平时开发是经常用到一些父子组件通信,经常用到props、vuex等等,下面这篇文章主要给大家介绍了关于vue中v-model和.sync修饰符区别的相关资料,需要的朋友可以参考下
    2022-06-06
  • vue中style设置scoped后部分样式不生效的解决

    vue中style设置scoped后部分样式不生效的解决

    这篇文章主要介绍了vue中style设置scoped后部分样式不生效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • 详解Vue3的虚拟DOM是如何生成的

    详解Vue3的虚拟DOM是如何生成的

    这篇文章给大家详细介绍了 Vue3 的虚拟DOM生成规则,文章通过代码示例和图片介绍的非常详细,具有一定的参考价值,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • Vue项目打包压缩的实现(让页面更快响应)

    Vue项目打包压缩的实现(让页面更快响应)

    这篇文章主要介绍了Vue项目打包压缩的实现(让页面更快响应),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。下面这篇文章主要给大家介绍了关于利用Vue.js实现求职在线之职位查询功能的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 基于vue的tab-list类目切换商品列表组件的示例代码

    基于vue的tab-list类目切换商品列表组件的示例代码

    这篇文章主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue分页组件实例代码

    Vue分页组件实例代码

    这篇文章主要为大家详细介绍了Vue分页组件的实例代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 浅谈vue中数据双向绑定的实现原理

    浅谈vue中数据双向绑定的实现原理

    本篇文章主要介绍了浅谈vue中数据双向绑定的实现原理 ,主要使用v-model这个数据双向绑定,有兴趣的可以了解一下
    2017-09-09
  • vant 中van-list的用法说明

    vant 中van-list的用法说明

    这篇文章主要介绍了vant 中van-list的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 基于Vue实现文件上传的几种实现方式

    基于Vue实现文件上传的几种实现方式

    文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能,下面这篇文章主要给大家介绍了关于基于Vue实现文件上传的几种实现方式,需要的朋友可以参考下
    2024-03-03

最新评论