vue-router 简单使用

概念

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

安装

npm install vue-router@4 -S

创建

import Home from '../components/Home.vue'
import Home2 from '../components/Home2.vue'
import {createRouter,createWebHashHistory} from 'vue-router'
const routes =[
    {path:'/home',component:Home},
    {path:'/home2',component:Home2},]

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

export default router

注册

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

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

页面

<template>
    <div>
        <router-link to="/home">home</router-link>
        <router-link to="/home2">home2</router-link>
        <router-view></router-view>
    </div>
</template>