路由--基础入门

Vue Router，是一个用于 Vue.js 的官方路由管理器。

它和 Vue.js 核心深度集成，使得构建单页面应用（SPA）变得简单。

在单页面应用中，页面不会重新加载整个页面，而是通过动态加载和替换页面的某些部分来实现与用户的交互

 

router

　　index.js

// 1. 定义路由组件.
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
export default router;

 

页面

 

App.vue

<template>
<div id="app">
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

 

main.js

// 从 Vue.js 框架中导入 createApp 函数。createApp 是用来创建 Vue 应用的函数。
import { createApp } from 'vue'

// 导入一个 CSS 文件，这个文件包含了应用程序的样式信息。'./style.css' 表示这个 CSS 文件位于同一目录下
import './style.css'

// 导入了一个 Vue 组件，这个组件通常是整个应用的主组件。App.vue 是一个单文件组件，它包含了应用的模板、逻辑和样式
import App from './App.vue'
import router from './router'
// 首先使用 createApp 函数创建一个新的 Vue 应用实例，然后用 mount 方法将这个应用挂载（显示）到 HTML 中的一个元素上。
// 这里的 '#app' 是一个选择器，它指向 HTML 中一个具有 id="app" 的元素，下面的index.html

// 创建 Vue 应用实例，并使用 router
const app = createApp(App)

// 使用 Vue Router 插件
app.use(router)

// 挂载 Vue 应用实例到 #app 元素
app.mount('#app')