vue 默认路由懒加载路由路由别名代指路径

最新推荐文章于 2023-03-28 12:26:14 发布

TGODS

最新推荐文章于 2023-03-28 12:26:14 发布

阅读量261

点赞数 1

分类专栏： VUE 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/qq_37131375/article/details/109862381

版权

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue.js项目中路由配置的几种关键方式，包括默认路由重定向、懒加载路由配置及别名路径设置等。通过具体实例说明如何实现推荐页作为默认首页、按需加载组件以及动态路由匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、默认路由 redirect

项目中不想用 / 定义首页的路由路径，可以使用 redirect 指代默认路由

{
	path: '/',
	redirect:"/recommended",//默认推荐页
},
{//推荐页
	path: '/recommended',
	name: 'recommended',
	component: resolve=>(require(["@/components/nav/recommended"],resolve)),//懒加载路由
},

/ 就是指代的 /recommended 路由路径

#### 2、懒加载路由

{//推荐页
	path: '/recommended',
	name: 'recommended',
	component: resolve=>(require(["@/components/nav/recommended"],resolve)),//懒加载路由
},

3、别名代指路径(别名路径一般都是用于子路由)

path:":id" // 路由跳转通过id跳转，路径名字为id名，就没有统一的路径了

{//推荐页
      path: '/recommended',
      name: 'recommended',
      component: resolve=>(require(["@/components/nav/recommended"],resolve)),
      children:[
        // 歌单详情页
        {
          path:":id",//:id表示传世不同id，id为变量
          component: resolve=>(require(["@/components/song-details/song-details"],resolve))
        }
      ]
    },