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中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)
这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
Vue 实现对quill-editor组件中的工具栏添加title
这篇文章主要介绍了Vue 实现对quill-editor组件中的工具栏添加title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue3+element plus中利用el-menu如何实现路由跳转
这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下2023-12-12


最新评论