Vue3开发 vue-router的使用

1、vue-router简介

官方介绍：Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

用大白话讲，vue-router主要用于构建单页面应用。详细查看官方文档 vue-router使用指南

2、路由嵌套

‘/home’路径下有’/home/news’资源，即请求子组件下面子组件。

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')

const route = {
   {
        path:'/home',
        component:Home,
        meta:{
          title:'首页'
        },
        children:[
            {
                path: '',
                redirect:'/home/news'
            },
            {
                path:'news',
                component:HomeNews
            },
            {
                path:'message',
                component:HomeMessage
            }
        ]
    }
}

3、路由传参

方式一：params
路由格式：path: ‘/user/:userId’
访问路由并传参

<router-link :to="'/user/' + userId"><button>用户</button></router-link>

接收参数 $route.params.userId，$route对象它封装了当前活动的路由。

方式二：query
路由格式（普通路由）：path:’/profile’
访问路由并传递参数

<router-link :to="{path:'/profile',query:{id:1,name:'邹越鹏',age:19}}"><button>档案</button></router-link>

接收参数使用$route.query.id。

4、路由的懒加载

先来看看我们普通的导入方式（不推荐使用），用户请求时会自动下载所有相关的组件资源，是EAGER的。

//导入组件
import Home from '../components/Home'

使用懒加载的方式导入，只有需要该资源的时候就会下载，是Lazy的。

const Home = () => import('../components/Home')

5、keep-alive与router-view

keep-alive用于保存一个组件的状态，使其不必每次重新渲染，可用于记住我们浏览的某些状态。

创建组件Home，下面案例用于保存Home组件message或news的状态。

<template>
    <h2>我是首页</h2>
    <router-link to="/home/news"><button>新闻</button></router-link>
    <router-link to="/home/message"><button>消息</button></router-link>
    <router-view></router-view>
</template>

<script>
    // import {} from 'vue'
    export default {
        name: "Home",
        data(){
            return{
                message:'你好啊',
                path:'/home/news'
            }
        },
        created(){
            console.log('Home created')
        },
        //以下两个函数只有在其组件被keep-alive标签保持的时候才会触发
        activated() {//当前路由活动时调用
            console.log('Home active')
            this.$router.push(this.path)
            // console.log('Home active')
        },
        // deactivated() {//当前路由失效，退出时调用
        //     console.log('Home deactivated')
        // },
        beforeRouteLeave(to,from){
            console.log('beforeRouteLeave')
            this.path = this.$route.path;
        }
    }
</script>

<style scoped>

</style>

路由配置

path:'/home',
component:Home,
 meta:{
   title:'首页',
   keepAlive:true
 },
 children:[
     {
         path: '',
         redirect:'/home/news'
     },
     {
         path:'news',
         component:HomeNews
     },
     {
         path:'message',
         component:HomeMessage
     }
 ]

keep-alive配合router-view的用法

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