【VUE3】Router安装及使用

目录

安装

配置

使用

概念

---

安装

如果根据【创建项目-教程】配置一致就项目目录下会出现router文件夹

如果没有先查看package.json是否存在vue-router，存在的话手动创建router文件夹

package.json内不存在vue-router使用以下命令在项目终端安装

npm install vue-router --save

安装完毕后查看package.json是否存在vue-router

 "dependencies": {
    "vue-router": "^4.0.3",
  },

配置

(1)打开main.ts

(2)配置router（下方有代码）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

(3)router下的路由文件（没有的话自己建一个index.ts）

写法一：

import { createRouter,createWebHistory} from 'vue-router';

const router = createRouter({
  routes: [
    {
      path: '/',
      //路由到的地址(自定义)
      name: 'HomeComponent',
      //组件名称
      component:()=>import('../views/HomeComponent.vue'),
      //引入组件，HomeComponent.vue所在路径
      //HomeComponent.vue是需要路由的vue组件
    },

  ],
  history: createWebHistory()
})
export default router;

写法二：

import { createRouter,createWebHistory} from 'vue-router';
import HomeComponent from '../views/HomeComponent.vue';
//引入组件，HomeComponent.vue所在路径
//HomeComponent.vue是需要路由的vue组件
const router = createRouter({
  routes: [
    {
      path: '/',
      //路由到的地址(自定义)
      name: 'HomeComponent',
      //组件名称
      component:HomeComponent,
      //引入HomeComponent
    },

  ],
  history: createWebHistory()
})
export default router;

使用

(1)在App.vue中添加<router-view />

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
#app{
  width: 100%;
  height: 100%;
}
</style>

(2)新建一个vue文件（根据自身情况）

<template>
<div>
  我是BackHome
  <router-link to="/">回到HomeComponent</router-link>
  //这个to="/"是router中配置的HomeComponent的地址
</div>

</template>

<script>
export default {
  name: "BackHome"
}
</script>

<style scoped>

</style>

(3)在router配置BackHome路由

import { createRouter,createWebHistory} from 'vue-router';
import HomeComponent from '../views/HomeComponent.vue';
import BackHome from '../views/BackHome.vue';

const router = createRouter({
  routes: [
    {
      path: '/',
      //路由到的地址(自定义)
      name: 'HomeComponent',
      //组件名称
      component:HomeComponent,
      //引入HomeComponent
    },
    {
      path: '/back',
      //路由到的地址(自定义)
      name: 'BackHome',
      //组件名称
      component:BackHome,
      //BackHome
    },
  ],
  history: createWebHistory()
})
export default router;

(4)HomeComponent添加代码

<template>
  <div>
    我是HomeComponent
    <router-link to="/back">前往BackHome</router-link>
  </div>
</template>

<script>
export default {
  name: "HomeComponent",
}
</script>

<style scoped>

</style>

(5)测试

点击前往BackHome后转跳

点击前往HomeComponent后回到HomeComponent

概念

路由器：

Vue Router 提供了一个路由器，用于管理应用程序中的路由。Vue Router 实例化一个 Vue Router 对象，注册路由规则，并以它为中心连接其他组件。

路由：

路由是分发到不同组件的 URL 地址。在 Vue Router 中，路由通常是由 path 规则和相应的组件定义的。当浏览器的 URL 匹配到路由的 path 后，相应的组件将会被加载到页面中。路由的信息可以从 route 对象中获取。

路由规则：

路由规则是由 path、component、name、meta、props 等属性组成的。其中，path 表示 URL 的路径，component 表示要渲染的组件，name 表示路由名称，meta 表示路由的元数据，props 表示路由 props 数据。路由规则可以注册到 Vue Router 中。

导航守卫：

导航守卫是在路由跳转时执行的钩子函数，用于控制路由的访问权限、处理路由跳转前后的逻辑等。在 Vue Router 中，对于选项式 API，常用的导航守卫有 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等；对于使用组合 API 和 setup 函数来编写组件的，可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。