vue-router@4安装及其使用

一、简单使用

1、安装

yarn add vue-router@4

2、在src目录下新建router文件夹，然后新建index.ts

// 1. 定义路由组件.

// 也可以从其他文件导入

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

import HelloWorld from '../components/HelloWorld.vue'

// 2. 定义一些路由

// 每个路由都需要映射到一个组件。

const routes = [

  { path: '/hello', component: HelloWorld },

]

// 3. 创建路由实例并传递 `routes` 配置

const router = createRouter({

  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。

  history: createWebHashHistory(),

  routes, // `routes: routes` 的缩写

})

export default router;

3、在main.ts中使用

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import router from './router'

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

4、在入口页面中使用，如App.vue

<script setup lang="ts">

import { useRouter } from 'vue-router'

const router = useRouter();

  router.push('/hello')

</script>

<template>

  <div>

    <router-view />

  </div>

</template>

<style scoped>