vue3中,配合的vueRouter版本更改为vue-router-next
通过

  npm i vue-router@next

的方式进行引入添加,随后创建 router.js,在main.js里面引入, 通过app.use(router)的方式进行使用;

import {createRouter, createWebHistory} from 'vue-router';
const history = createWebHistory();

const router = createRouter({
  history,
routes: [
{
path: '/',
name: 'Home',
component: () => import('./views/Home/index.vue'),
},
{
path: '/cards',
name: 'Cards',
component: () => import('./views/Cards/index.vue'),
},
{
path: '/hello',
name: 'Hello',
component: () => import('./components/HelloWorld.vue'),
},
],
});
export default router;

这个模式
const history = createWebHistory();
和之前vue2对应的vueRouter版本通过mode:'hash',mode:'history',mode:'abstract'方式有所不同,在现阶段的网上的教程,没有说明vue3的hash模式如何开启,默认都是history模式

因此通过 localhost:8080/#/hello 或者
localhost:8080/#/cards 无法进入到对应的路由页面;

通过查看打印 vue-router-next 对外暴露的方法, 找到了vue-router-next版本下开启 hash模式的方法

import * as res from 'vue-router'; // 引入vueRouter所有暴露的方法并取别名 res
console.log(Object.keys(res)); // 将res所有属性的key值转成数组并打印

// ['NavigationFailureType', 'RouterLink', 'RouterView', 'START_LOCATION', 'createMemoryHistory', 'createRouter', 'createRouterMatcher', 'createWebHashHistory', 'createWebHistory', 'isNavigationFailure', 'onBeforeRouteLeave', 'onBeforeRouteUpdate', 'parseQuery', 'stringifyQuery', 'useLink', 'useRoute', 'useRouter'];

找到上面 createWebHistory 相类似的API: createWebHistory createMemoryHistory createWebHashHistory 这三个正是我们想要的;
createWebHistory: 对应 mode:'history'
createWebHashHistory : 对应mnode:'hash'
createMemoryHistory: 这个是在内存中进行匹配, 对应的应该是 'abstract', 

因此,将路由定义时候
const history = createWebHistory();
更改为
const history = createWebHashHistory();
就能达到原来vue2中对应的hash模式了

vue-router-next 通过hash模式访问页面不生效,直接刷新页面一直停留在根路由界面的解决办法的更多相关文章

  1. 【转载】 jmeter 命令行模式(非GUI)运行脚本,察看结果树结果为空,解决办法

    转载地址:https://www.cnblogs.com/canglongdao/p/12636403.html jmeter 命令行模式(非GUI)运行脚本,察看结果树结果为空,解决办法: jmet ...

  2. vue router mode 设置"hash"与"history"的区别

    router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...

  3. 数据库无法访问,用户 NT AUTHORITY/SYSTEM或NT AUTHORITY\NETWORK SERVICE登录失败的解决办法

    问题:win7中的在IIS 7.0中,在 Default Web Site 目录下挂一虚拟目录. 在相应的应用程序池 DefaultAppPool 设置标识设置成NetworkService. 但是打 ...

  4. 只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!

    SENNA.js Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性.还提供非常酷炫的动画效果.想要详细了解的朋友 ...

  5. centos 7 IP不能访问nginx Failed connect to 185.239.226.111:80; No route to host解决办法

    服务器环境 centos 7.4 问题描述 1.可以ping通IP ,用IP访问nginx 不能访问,在服务器上curl localhost  curl 185.239.226.111可以获得 [ro ...

  6. 火狐浏览器不支持location.reload()(以改变页面大小时重新刷新页面为例)

    背景:当页面大小改变时需要重新刷新页面,以适应相应的尺寸 解决方法: var url = window.location.href; var parm = parseInt(Math.random() ...

  7. thinkphp配置rewrite模式访问时不生效 出现No input file specified解决方法

    使用thinkphp配置rewire模式的路径访问网站时, 直接复制官网的.htaccess文件的代码复制过去 1 2 3 4 5 6 <IfModule mod_rewrite.c>   ...

  8. 页面显示This is the initial start page for the WebDriver server.的解决办法

    今天在做项目的时候,遇到一个奇怪的问题,打开浏览器是正常的,但是页面不会跳转到需要的URL,而是提示一行白字,如图: 反复研究了脚本,没有问题啊,但是就是不跳转. 后来查了下,在某论坛上找到了答案: ...

  9. Vue 数组中更新属性值后,视图不更新,等待其他元素更新后会触发的解决办法

    因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. t ...

随机推荐

  1. 蓝牙RFCOMM通信

    最近需要在某个开发板上面通过蓝牙和手机蓝牙连接,并通过RFCOMM通信.还没有做过蓝牙RFCOMM相关工作,因此先在linux PC上面调试一下流程,并在此记录调试过程. 一.说明 RFCOMM协议基 ...

  2. oracle进行一对多关联查询的时候,获取副表(也就是多条记录的那张表)的最新一条记录进行关联,如何获取多条记录最新一条呢?

    例如以下场景: 一条新闻对应多条审核记录,用户想知道这条新闻走到哪一步审核了. 使用:select * from (select b.*,(ROW_NUMBER() OVER (PARTITION B ...

  3. 学习一下 JVM (二) -- 学习一下 JVM 中对象、String 相关知识

    一.JDK 8 版本下 JVM 对象的分配.布局.访问(简单了解下) 1.对象的创建过程 (1)前言 Java 是一门面向对象的编程语言,程序运行过程中在任意时刻都可能有对象被创建.开发中常用 new ...

  4. 如何检查nofollow超链接属性是否有效

    http://www.wocaoseo.com/thread-88-1-1.html     nofollow 标签的重要性就不用阐述了,在这里武汉SEO与大家分享一些nofollow 标签的基本知识 ...

  5. 轻量化模型训练加速的思考(Pytorch实现)

    0. 引子 在训练轻量化模型时,经常发生的情况就是,明明 GPU 很闲,可速度就是上不去,用了多张卡并行也没有太大改善. 如果什么优化都不做,仅仅是使用nn.DataParallel这个模块,那么实测 ...

  6. Labview学习之路(八)如何让控件显示在修饰符的前面

    在Labview2017版本中,前面板选择修饰控件,会出现部分修饰控件会掩盖其他控件,情况如下: 我们右键点击和属性中都没有相关属性的改变,为什么是这样我也不清除: 上网查了一下,看到其他版本会有显示 ...

  7. unity3d插入android有米广告

    有米官网:http://www.youmi.net/register?r=MTI0MDg= 国内的广告,我觉得万普和有米还不错,我也只试了这两个,其他的都是看评价的,呵呵~~~首先我们去有米官网注册一 ...

  8. Unity Plugins的使用方法

    一.为插件设置平台的方法 unity5之前,是通过把插件搞到对应目录进行区分平台的(比如在build target是ios平台时只把IOS目录的插件build进去),unity5之后提供了设置平台/c ...

  9. 初级知识点一——C#中的值类型与引用类型

    从C#语言的定义中可以知道,C#支持两种值类型,分别是 值类型和引用类型,那么两者的区别到底在哪儿呢? 值类型特点: 1. 值类型包含 a 预定义的值类型 b 用户自定义的值类型(struct) 2. ...

  10. ACboy needs your help (动态规划背包)

    ACboy has N courses this term, and he plans to spend at most M days on study.Of course,the profit he ...