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 路径跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08解决Vue控制台报错Failed to mount component: tem
这篇文章主要介绍了解决Vue控制台报错Failed to mount component: template or render function not defined.问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论