Vue学习之路14----组件路由

1.安装vue-router

需要在项目路径下安装vue-router

npm i vue-router

2.使用vue-router

• 新建一个router文件夹

  ​ 我这里再新建组件文件夹里面存放可供路由更换的组件

  

• 在router/index.js中写路由并暴露

  import { createRouter, createWebHistory } from "vue-router";
  
  import V1 from "@/components/V1.vue";
  import V2 from "@/components/V2.vue";
  import V3 from "@/components/V3.vue";
  
  const router = createRouter({
    history: createWebHistory(),
    routers: [
      {
        path: '/V1',
        component: V1
      },
      {
        path: '/V2',
        component: V2
      },
      {
        path: '/V3',
        component: V3
      },
    ]
  })
  
  export default router
  

• 在main.js中使用路由

  import { createApp } from 'vue'
  // 从一个单文件组件中导入根组件
  import App from './App.vue'
  
  import router from "./router";
  
  const a = createApp(App)
  a.use(router)
  a.mount('#app')
  

• 在App.vue中使用路由

  目前路由的配置基本完成，可以在组件中使用了，RouterLink用于切换路由RouterView用于展示路由中的组件

  <template>
    <RouterLink to="/V1">V1</RouterLink>
    <RouterLink to="/V2">V2</RouterLink>
    <RouterLink to="/V3">V3</RouterLink>
    <RouterView/>
  </template>
  <script setup name="App">
  import { RouterLink,RouterView } from "vue-router";
  </script>
  <style scoped></style>
  

• 运行效果如下

3.路由组件的生命周期

​ 在路由组件被展示时，他被挂载。切换到其他路由时，他被销毁

​ 如下是V1.vue的代码：

<template>
  我是v1
</template>
<script setup>
  import { onMounted,onUnmounted } from "vue";
  onMounted(()=>{
    console.log('v1被挂载了');
  })
  onUnmounted(()=>{
    console.log('v1被卸载了');
  })
</script>
<style scoped></style>

运行效果如下：

4.路由器的工作模式

​ 在创建路由时，用createWebHistory代表history模式，用createWebHashHistory代表hash模式

import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),//history模式
  history: createWebHashHistory(),//hash哈希模式
  routes: [...
  ]
})

history模式更接近传统网站url，hash则带有#

4.接收传参

可以使用userRoute接收传参：

如上是使用query进行传参，若使用params进行传参，则需要如下操作

且params无法传参数组

当然使用props传参是最简洁的，下一小节我将会讲解props

5.关闭历史记录

在<RouterLink>标签上加replace属性浏览器将不记录历史

6.在js中实现切换路由

可以使用useRouter切换路由，router.replace相当于RouterLink的to

<template>
  <RouterLink to="/V1">V1</RouterLink>
  <RouterLink to="/V2">V2</RouterLink>
  <RouterLink to="/V3">V3</RouterLink>
  <button @click="change">点我切换v1</button>
  <RouterView/>
</template>
<script setup name="App">
import { RouterLink,RouterView,useRouter } from "vue-router";
const router=useRouter()
function change() {
  router.replace({
    path: '/V1',
  })
}
</script>
<style scoped></style>

7.重定向

以下是重定向写法：

{
      path: '/',
      redirect: '/V1'
    },