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')
标签:Vue,入门,--,app,vue,import,router,路由 From: https://www.cnblogs.com/mxleader/p/17961786