《Vue3 基础知识》router 安装与引入

目录

一、安装

二、配置

三、其它

---

一、安装

官方安装教程可进入此处

npm i vue-router@4

二、配置

1、src 文件夹下新建 router/index.ts

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

import About from '../viewer/About.vue'
import Home from '../viewer/Home.vue'

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

2、main.ts 中导入并注册 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

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

3、App.vue 添加 <router-view/>，且能用 <router-link> 切换

<template>
  <!-- 路由 -->
  <router-view/>
  <!-- 切换 -->
  <router-link to='/'> Home</router-link><br/>  
  <router-link to='/about'> About</router-link>
</template>

三、其它

如果你想对比 Vue2.x 的router 使用，可进入此处

官网有详细的说明与 Vue2 差异，可进入此处