vue快速入门(五十一)历史模式

注释很详细,直接上代码

上一篇

新增内容
历史模式配置方法

默认哈希模式,历史模式与哈希模式在表层的区别是是否有/#/

其他差异暂不深究
源码

html 复制代码
//导入所需模块
import Vue from "vue";
import VueRouter from "vue-router";
import myMusic from "@/views/myMusic.vue";
import findMusic from "@/views/findMusic.vue";
import attentionSigner from "@/views/attentionSigner.vue";
import recommendList from "@/views/recommendList.vue";
import rankingList from "@/views/rankingList.vue";
import songList from "@/views/songList.vue";
//调用函数将VueRouter插件安装为Vue的插件
Vue.use(VueRouter);

//配置路由规则
const routes = [
  //重定向
  { path: "/", redirect: "/MyMusic/recommendList" },
  {
    path: "/myMusic",
    component: myMusic,
    // 二级路由无需写'/'
    children: [
      {
        path: "recommendList",
        component: recommendList,
      },
      {
        path: "rankingList",
        component: rankingList,
      },
      {
        path: "songList",
        component: songList,
      },
    ],
  },
  {
    // 动态路由接受参数(后面加问号表示为可选参数)
    path: "/findMusic/:name?",
    component: findMusic,
  },
  {
    path: "/attentionSigner",
    component: attentionSigner,
  },
];

//创建路由实例
const router = new VueRouter({
  // 路由配置
  routes,
  //历史模式
  mode: 'history'
  //这里可以修改router-link的默认类名
  /*
    linkActiveClass:'my-active-class',
    linkExactActiveClass:'my-exact-active-class'
    */
});
//导出路由实例
export default router;

效果演示

相关推荐
MR·Feng8 分钟前
使用Electron将vue2项目打包为桌面exe安装包
前端·javascript·electron
萧大侠jdeps21 分钟前
图片生成视频-右进
前端·javascript·音视频
CSDN专家-赖老师(软件之家)24 分钟前
养老院管理系统+小程序项目需求分析文档
vue.js·人工智能·小程序·mybatis·springboot
Domain-zhuo43 分钟前
JS对于数组去重都有哪些方法?
开发语言·前端·javascript
明月清风徐徐1 小时前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解1 小时前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队1 小时前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿2 小时前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿2 小时前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下2 小时前
React和Next.js的相关内容
前端·javascript·react.js