项目引入路由

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们

安装路由

npm install vue-router@4 --save

实现路由功能

xxxxxxxxxx
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter,createWebHashHistory } from "vue-router"
import Home from "./pages/Home.vue"
import About from "./pages/About.vue"
const routes = [
    {
        path:"/",
        component:Home
    },
    {
        path:"/about",
        component:About
    }
]
const router = createRouter({
    // 路由地址访问方式 #  /
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式
    history: createWebHashHistory(),
    routes
})
const app = createApp(App)
app.use(router)
app.mount('#app')

xxxxxxxxxx
<template>
    <h3>Home首页</h3>
</template>

xxxxxxxxxx
<template>
    <h3>About关于页面</h3>
</template>

xxxxxxxxxx
<template>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
</template>

router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局

router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。

这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码

我们将在后面看到如何从这些功能中获益

实时效果反馈

1.在Vue路由中，实现页面跳转下列是哪一个：

A router

B router-view

C router-link

D createRouter

答案

1=>C