wordpress图片alt属性,企业网站优化分为两个方向,网站网站 后缀gr,苏州 网站的公司文章目录 1. 安装 vue-router2. 创建路由模块3. 在 main.js 中使用路由4. 注意 1. 安装 vue-router 首先#xff0c;如果还没有安装 vue-router#xff0c;需要在项目目录下通过命令行进行安装。假设你的项目是基于npm管理包的#xff0c;使用以下命令安装#xff1a;
npm… 文章目录 1. 安装 vue-router2. 创建路由模块3. 在 main.js 中使用路由4. 注意 1. 安装 vue-router 首先如果还没有安装 vue-router需要在项目目录下通过命令行进行安装。假设你的项目是基于npm管理包的使用以下命令安装
npm install vue-router4这里安装的是vue-router的第 4 版因为是在Vue 3环境下使用。
2. 创建路由模块 在项目的src目录下创建一个router文件夹在该文件夹内创建一个index.js也可以是其他文件名如router.js文件。 导入Vue和VueRouter以及需要展示的组件。例如有两个组件Home.vue和About.vue代码如下
import { createRouter, createWebHistory } from vue-router;
import Home from ../views/Home.vue;
import About from ../views/About.vue;这里createWebHistory是用于设置路由模式为 HTML5 的历史模式。 然后创建路由实例并定义路由规则
const routes [{path: /,name: Home,component: Home},{path: /about,name: About,component: About}
];
const router createRouter({history: createWebHistory(),routes
});
export default router;在路由规则中path表示浏览器访问的路径name是路由的名称可选但方便后续引用component是对应的组件。
3. 在 main.js 中使用路由 在main.js文件中导入刚刚创建的路由模块并将其挂载到Vue应用上。代码如下
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;
const app createApp(App);
app.use(router);
app.mount(#app);这样Vue应用就集成了路由功能。当浏览器访问http://localhost:你的端口号/时会显示Home组件访问http://localhost:你的端口号/about时会显示About组件。
4. 注意 需要注意的是
路径的设置要符合实际需求并且确保组件的路径正确导入。如果组件的路径发生变化需要相应地更新路由文件中的导入路径。除了createWebHistory模式还有createWebHashHistory模式。createWebHashHistory会在浏览器的 URL 后面添加#符号来管理路由例如http://localhost:你的端口号/#/about。这种模式在某些服务器配置下可能更方便但是 URL 看起来会比较复杂。
