Vue3.0 路由

目录
一、路由懒加载
二、三种模式
三、带参数的动态路由匹配
四、params和query传参
五、编程式导航
六、全局前置守卫
七、组件内的守卫
八、缓存页面

一、 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

const Home = () => import('./views/Home.vue')

二、 三种模式

1、hash模式（vue-router默认模式URL后面带#）使用URL的hash值来作为路由，支持所有浏览器 缺点：只能改变#后面的来实现路由跳转。

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

2、history模式（通过mode: 'history’来改变为history模式）HTML5 （BOM）History API 和服务器配置 缺点：怕刷新如果后端没有处理这个情况的时候前端刷新就是实实在在的请求服务器这样消耗的时间很多还很慢。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

3、abstract模式适用于所有JavaScript环境，例如服务器端使用Node.js。如果没有浏览器API，路由器将自动被强制进入此模式。

const router = createRouter({
  history: createMemoryHistory(process.env.BASE_URL),
  routes
})

三、带参数的动态路由匹配

1、设置路由参数name,?代表可选参数。

  {
    path: '/Detail/:name?',
    name: 'Detail',
    component: Detail
  }

2、通过to传递参数name。

  <router-link to="/Detail/星星编程">进入详情</router-link>

3、接收参数name。

<template>
  <div class="detail">
    详情页面接收参数
    <p>{{name}}</p>
  </div>
</template>
<script>
import {  useRoute } from 'vue-router'
export default {
  name: 'Detail',
  setup() {
    const route = useRoute()  
    return {
      name :route.params.name
    }
  }
}
</script>

四、params和query传参

1、params不支持路由传参方式：

router.push({ path: '/Detail', params: { name }})

params导航栏显示http://localhost:8080/Detail/星星编程
正确的传参方式如下：

<template>
  <div class="home">
    <Button @click="jump">页面跳转</Button>
    <router-view/>
  </div>
</template>
<script>
import {  useRouter } from 'vue-router'
export default {
  name: "Home",
 setup(){
    const router = useRouter()  
    function jump(){
      let name = '星星编程';
      //router.push('Detail')
      //router.push({path: 'Detail'})
      //router.push({ path: `/Detail/${name}` })
      router.push({ name: 'Detail', params: { name }})
    }
    return {
      jump
    }
 }
};
</script>

2、query传参,导航栏显示http://localhost:8080/Detail?name=星星编程

 router.push({ name: 'Detail', query: { name }})
或者
 router.push({ path: 'Detail', query: { name }})

五、编程式导航

1、导航到不同的位置

 router.push({ name: 'Detail', query: { name }})

2、替换当前位置

router.push({ path: '/Detail', replace: true })

3、横跨历史

router.go(1)

六、全局前置守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。如下通过meta全局设置浏览器标签页标题：

router.beforeEach((to, from, next) => {
  next()
  document.title = to.meta.title
})

七、组件内的守卫

路由组件内直接定义以下路由导航守卫：1、onBeforeRouteEnter 2、onBeforeRouteUpdate 3、onBeforeRouteLeave

onBeforeRouteLeave((to, from, next) => {
      console.log("将要离开当前组件了，关注一下星星编程微信公众号吧！");
      next();
    });

八、缓存页面

当我们不想每次跳转路由都会重新加载页面时（重新加载页面很耗时），就可以考虑使用keep-alive缓存页面了。可以使用include和exclude去指定自己想要缓存的页面或不想缓存的页面，组件名称不能省略。

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