Vue Router 路由管理器及其使用方法

什么是vue-router路由?

Vue Router是Vue.js官方的路由管理器。它可以帮助开发者构建SPA（Single Page Application，单页应用程序），并实现路由跳转、参数传递、懒加载等功能。Vue Router通过监听URL的变化，来切换组件的显示，让用户在不同的页面之间进行切换，而不需要整页刷新。

简单来说,路由是切换页面的一种机制，表现出来就是通过不同的网页地址，显示出不同的页面内容。

安装vue-router

在创建Vue项目时,选择安装Router选项,就自动安装上了vue-router,并且还自动配置好了路由示例。

src/router/    核心路由模块

src/views/     路由组件(页面组件)储存位置

配置使用路由

1.建

创建页面组件,取名大驼峰命名法,两个单词以上

NewsView.vue

2.配

配置路由线路,引入路由组件,编写线路

第一种:先引入组件

import NewsView from '@/views/NewsView.vue'

{
    path: '/news',
    component: NewsView,
}

第二种:懒加载

{
    path: '/news',
    component: () => import("@/views/NewsView.vue"),  //懒加载
}

3.出

在App.vue里面配置路由出口

<router-view/>

4.导航

在App.vue里面添加导航链接

<router-link to="/news">六思逸</router-link>

嵌套路由(二级路由)

什么是嵌套路由?

嵌套路由也被称作二级路由，是指在一个路由里面再定义一组子路由，用于实现页面模块化管理和嵌套展示。通过使用嵌套路由，可以将复杂的页面划分为多个小模块，实现各个子模块单独处理，降低代码的耦合度。

配置嵌套路由

1.建

简历路由组件,用于二级路由

NewsView1.vue
NewsView2.vue
NewsView3.vue

2.配

配置二级路由,需要在一级路由中添加children,二级路由的配置与一级路由一样

{
    path: '/news',
    component: NewsView,
    //配置二级路由
    children: [
         { path: '/news/news1', component: () => import("@/views/NewsView1.vue")},
         { path: '/news/news2', component: () => import("@/views/NewsView2.vue")},
         { path: '/news/news3', component: () => import("@/views/NewsView3.vue")},
    ]
}

3.出

在一级路由的组件中编写二级路由的出口

<template>
    <div>
        <h1>新闻中心</h1>

        <!-- 二级路由的出口，在一级路由中编写 -->
        <router-view></router-view>
    </div>
</template>

4.导航(可选)

在一级路由的组件中编写二级路由的导航

默认路由

什么是默认路由?

在进入一级路由时,默认显示一个二级路由的组件内容,就是默认路由

方式一:不写二级路由地址,就是默认路由

  {
    path: '/news',
    component: NewsView,
    //配置二级路由
    children: [
      { path: '', component: News1 }, //默认路由
      { path: '/news/news2', component: News2 },
      { path: '/news/news3', component: News3 },
    ]
  }

方式二:访问一级路由时,自动跳转到二级路由

  {
    path: '/news',
    redirect: '/news/news1', //访问一级路由时自动跳转到二级路由
    component: NewsView,
    //配置二级路由
    children: [
      { path: '/news/news1', component: News1 },
      { path: '/news/news2', component: News2 },
      { path: '/news/news3', component: News3 },
    ]
  }

路由模式

什么是路由模式?

路由模式指的是前端路由的模式,路由模式有三种，分别是：abstract, history, hash

1.abstract

地址栏不变，隐藏路径

2.history

地址栏显示一个完整的URL地址，没有#

3.hash

在地址栏以#显示路由地址