vue3路由属性和配置

1.路由的属性配置

1.router-link的v-slot

在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素：

但是在vue-router4.x开始，该属性被移除了； 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容；

v-slot如何使用呢？

首先，我们需要使用custom表示我们整个元素要自定义

    如果不写，那么自定义的内容会被包裹在一个 a 元素中；

其次，我们使用v-slot来作用域插槽来获取内部传给我们的值

    href：解析后的 URL；

    route：解析后的规范化的route对象；

    navigate：触发导航的函数；

    isActive：是否匹配的状态；

    isExactActive：是否是精准匹配的状态；

<!-- props: href 跳转的链接 -->
    <!-- props: route对象 -->
    <!-- props: navigate导航函数 -->
    <!-- props: isActive 是否当前处于活跃的状态 -->
    <!-- props: isExactActive 是否当前处于精确的活跃状态 -->
    <!-- custom自定义状态，下面元素不再被a标签包裹 -->
    <router-link to="/home" v-slot="props" custom>
      <button @click="props.navigate">{{props.href}}</button>
      <button @click="props.navigate">哈哈哈</button>
      <span :class="{'active': props.isActive}">{{props.isActive}}</span>
      <span :class="{'active': props.isActive}">{{props.isExactActive}}</span>
      </router-link>

2.router-view的v-slot

outer-view也提供给我们一个插槽，可以用于 和 组件来包裹你的路由组件：

• Component：要渲染的组件；
• route：解析出的标准化路由对象；

这个组件用于存放路由所对应的组件

  <router-view v-slot="props">
        <keep-alive>
          <component :is="props.Component"></component>
        </keep-alive>
      </transition>
  </router-view>

可以解构赋值:

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

vue3相比于vue2发生了一些变化,如果还是采用vue2的方式会报一个警告:[vue报错： can no longer be used directly inside or ]

3.命名式路由 name

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。在 routes 配置中给某个路由设置名称。

const routes = [
  {
    //对应的路径
    path: '/home',
    //路由对应的名字
    name:'Home',
    //对应的组件
    component:Home
  },
  {
    path: '/about',
    name:'About',
    component:About
  },
   {
     path: '/hello',
     name:'Hello',
    component:Hello
  }
]

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

 <router-link :to="{name:'Home'}">跳转到home</router-link>

4.redirect

使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转执行B。

用户第一次访问网站页面(“/根目录”首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过重定向实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。

//配置路由映射
const routes = [
  {
    path: '/',
    //路由重定向
    redirect:'/home'
  },
  {
    //对应的路径
    path: '/home',
    //路由对应的名字
    name:'Home',
    //对应的组件
    component:Home
  },
  {
    path: '/about',
    name:'About',
    component:About
  },
   {
     path: '/hello',
     name:'Hello',
    component:Hello
  }
]

5.路由元信息

meta：

每个路由的标识信息，是路由独有的一个信息，无论在路由中是否定义meta，在组件中都可以通过this.$route.meta访问到，如果没有定义，返回{}

在组件中：

this.$route.meta获取该组件的路由元信息，如果未定义，则返回{}

路由元信息用途

根据每个路由特有的信息
1.验证用户是否登录
2.设置标题
3.是否显示某个组件
4.组件是否缓存……

配置meta属性:

const routes = [
  {
    path: '/',
    //路由重定向
    redirect:'/home'
  },
  {
    //对应的路径
    path: '/home',
    //路由对应的名字
    name:'Home',
    //对应的组件
    component: Home,
    meta: {
      keepAlive: true,
      title:'home'
    }
  },
  {
    path: '/about',
    name:'About',
    component: About,
    meta: {
      keepAlive: true,
      title:'about'
    }
  },
   {
     path: '/hello',
     name:'Hello',
     component: Hello,
    meta: {
      keepAlive: false,
      title:'hello'
    }
  }
]

配置组件是否缓存:

<router-view v-slot="{Component}">
  <keep-alive>
    <component :is="Component" v-if="$route.meta.keepAlive" />
  </keep-alive>
  <component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>

这样直接配置,大概率会报错,我们在路由节点内配置name属性，且保证为唯一标识，或其它唯一标识也行.

<router-view v-slot="{Component}">
  <keep-alive>
    <component :is="Component" :key="$route.name"   v-if="$route.meta.keepAlive" />
  </keep-alive>
  <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
</router-view>

6.路由的懒加载

　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

这里可以使用webpack的分包知识，而Vue Router默认就支持动态来导入组件

1. 这是因为component可以传入一个组件，也可以接收一个函数，该函数 需要放回一个Promise；
2. 而import函数就是返回一个Promise；

const routes = [
  {
    path: '/',
    //路由重定向
    redirect:'/home'
  },
  {
    //对应的路径
    path: '/home',
    //路由对应的名字
    name:'Home',
    //对应的组件
    component:()=>import("../components/Home.vue"),
    meta: {
      keepAlive: true,
      title:'home'
    }
  },
  {
    path: '/about',
    name:'About',
    component:()=>import("../components/About.vue"),
    meta: {
      keepAlive: true,
      title:'about'
    }
  },
   {
     path: '/hello',
     name:'Hello',
     component: ()=>import("../components/HelloWorld.vue"),
    meta: {
      keepAlive: false,
      title:'hello'
    }
  }
]