网站 做 app开发工具,pexels免费素材网站,导航网站怎么建,做国外衣服的网站学习和分享关于 Vue.js 的路由#xff08;vue-router#xff09;是一个非常有价值的主题#xff0c;因为路由是构建单页应用程序#xff08;SPA#xff09;的核心部分。本文将介绍 Vue.js 路由的基本概念和实现#xff0c;并展示一个典型的项目目录结构。 目录 Vue.js 路…学习和分享关于 Vue.js 的路由vue-router是一个非常有价值的主题因为路由是构建单页应用程序SPA的核心部分。本文将介绍 Vue.js 路由的基本概念和实现并展示一个典型的项目目录结构。 目录 Vue.js 路由简介目录结构关键文件和文件夹 实现基本的路由1. 安装 Vue Router2. 配置路由3. 创建视图组件4. 修改 main.js5. 更新根组件 App.vue6. 启动开发服务器 Vue.js 路由简介
Vue Router 是 Vue.js 官方的路由管理器允许我们在 Vue 应用中实现客户端路由。它使我们可以创建多个页面或视图并在用户导航时保持单页应用程序的感觉。
目录结构
一个典型的 Vue.js 项目目录结构包括 Vue Router如下所示
my-vue-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Home.vue
│ │ ├── About.vue
│ │ └── ...
│ ├── router/
│ │ └── index.js
│ ├── views/
│ │ ├── HomeView.vue
│ │ ├── AboutView.vue
│ │ └── ...
│ ├── App.vue
│ ├── main.js
│ └── ...
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js关键文件和文件夹
public/包含静态文件如 index.html。src/包含源代码。 assets/存放静态资源如图片、字体等。components/存放 Vue 组件。router/存放路由配置文件。 index.js定义路由和路由规则。 views/存放视图组件通常是页面级组件。App.vue根组件。main.js入口文件初始化 Vue 实例并挂载到 DOM。
实现基本的路由
下面是实现基本路由的步骤
1. 安装 Vue Router
首先需要安装 Vue Router
npm install vue-router2. 配置路由
创建并配置路由文件 src/router/index.js
import Vue from vue;
import VueRouter from vue-router;
import HomeView from ../views/HomeView.vue;
import AboutView from ../views/AboutView.vue;Vue.use(VueRouter);const routes [{path: /,name: Home,component: HomeView},{path: /about,name: About,component: AboutView}
];const router new VueRouter({mode: history,base: process.env.BASE_URL,routes
});export default router;3. 创建视图组件
在 src/views/ 目录下创建视图组件 HomeView.vue 和 AboutView.vue。
HomeView.vue
templatedivh1Home Page/h1pWelcome to the home page./p/div
/templatescript
export default {name: HomeView
};
/scriptstyle scoped
/* Add your styles here */
/styleAboutView.vue
templatedivh1About Page/h1pThis is the about page./p/div
/templatescript
export default {name: AboutView
};
/scriptstyle scoped
/* Add your styles here */
/style4. 修改 main.js
在 src/main.js 中引入并使用路由
import Vue from vue;
import App from ./App.vue;
import router from ./router;Vue.config.productionTip false;new Vue({router,render: h h(App)
}).$mount(#app);5. 更新根组件 App.vue
修改 src/App.vue 以包含路由视图和导航链接
templatediv idappnavrouter-link to/Home/router-linkrouter-link to/aboutAbout/router-link/navrouter-view//div
/templatescript
export default {name: App
};
/scriptstyle
/* Add your styles here */
/style6. 启动开发服务器
最后启动开发服务器并查看效果
npm run serve打开浏览器访问 http://localhost:8080你应该能够看到首页和关于页面并可以通过导航链接在它们之间切换。 通过这些步骤你已经创建了一个包含 Vue Router 的基本 Vue.js 应用程序。你可以根据需要添加更多的路由和组件以构建更加复杂和功能丰富的应用。希望这篇文章能帮助你快速入门并分享 Vue.js 路由的知识。
