vite+Vue-router初体验

在我们还没有接触到vue的时候，加载一个页面都是需要编写一个html的文件，然后通过a链接来回跳转与切换，如今大部分都是单页面组件(SPA)，也就是说页面的地址栏不发生变化 就可以按需加载，而且是局部加载，实现UI与用户的交互。这样做有什么好处呢？

优点

1. 减轻服务器压力，服务器只需要提供数据
2. 页面更流畅
3. 良好的前后端分离，前端完全组件化，后端的api也通用

缺点：首次加载时间比较长

1. 安装

npm

npm install vue-router@4

yarn

yarn add vue-router@4

2. 初体验的小案例

1. router-link与router-view

router-link是一个组件标签，局部的加载一个组件,这个组件有一个to的属性，指定路由器中的路径,路径又对应着一个组件，把路径对应的组件加载到router-view(这是一个出口地方，可以放在任何地方)中

2. vue路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

配置路由

import { createApp } from 'vue';  //引入小型的vm
import { createRouter , createWebHashHistory } from "vue-router" //引入路由

//加载组件
import Home from './components/Home.vue'
import About from './components/About.vue'

//配置路由信息
const routes = [
    { path: '/home/:name', component: Home },
    { path: '/about', component: About },
]

//创建一个路由器，采用hash模式
const router = createRouter({
    history: createWebHashHistory(),
    routes
})


import './style.css'
import App from './App.vue'

const app = createApp(App);
// 路由器是一个插件 必须要use
app.use(router).mount('#app');

3. param和query参数

Sulin就在路由的params参数中 params需要在配置路由的时候进行占位

<router-link to="/home/Sulin">Go to Home</router-link>

query参数

  <router-link to="/about?name=Tina&age=19">Go to About</router-link>

场景

在主页输入关键字进行路由跳转到Search.vue 那么在主页的关键字就需要通过params或者query参数传给Seach.vue，接收到关键字参数，就可以进行ajax请求

这两个参数也可以进行编程式导航配置 咱们后续再说，本次就是初体验

App.vue

<div>
    <h3>Hello World</h3>
    <p>
      <!-- 传递params参数 需要在配置路由的时候进行占位 -->
      <router-link to="/home/Sulin">Go to Home</router-link>

      <!-- 传递query参数 -->
      <router-link to="/about?name=Tina&age=19">Go to About</router-link>
    </p>
    <!-- 出口 -->
    <router-view></router-view>
  </div>

Home.vue

<template>
    <div>
        我是Home组件
    </div>
</template>


<script setup>


import { toRaw } from 'vue';
import { useRouter, useRoute } from 'vue-router';


const router = useRouter();
const route = useRoute();


console.log(`Home-> params参数`,toRaw(route.params));
</script>

About.vue

<template>
    <div>
        我是About组件
    </div>
</template>


<script setup>
import { onMounted, onBeforeUnmount, onUnmounted, toRaw } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();


onMounted(() => {
    console.log('被挂载了');
    console.log(`About-> query参数`, toRaw(route.query));


})


onUnmounted(() => {
    console.log('卸载');
})


</script>

现在点击就能够进行路由的跳转了