品牌形象网站源码,网站方案策划书18000字,凌美上海建设工程网站,兴华建设集团有限公司网站有需求是在vue项目中实现点击按钮完成页面跳转。这里不适用a标签#xff0c;而是用vue自带的vue-router。
首先看一下项目结构 src │ App.vue │ main.js │ ├─router │ index.js │ └─views index.vue content.vue 可以看到而是用vue自带的vue-router。
首先看一下项目结构 src │ App.vue │ main.js │ ├─router │ index.js │ └─views index.vue content.vue 可以看到我在初始的vue项目中添加了一个文件夹router并在里面添加了一个index.js文件。而view文件夹则是存放需要跳转的页面里面分别是代表首页的index.vue文件和内容页面content.vue接下来看看5个文件各自有什么内容。
App.vue文件
script setup
/scripttemplaterouter-view/router-view
/templatestyle scoped/style很简单只是加了用于显示路由页面内容的router-view/router-view
main.js文件
import {createApp} from vue
import App from ./App.vue
import router from /router/index.js // 导入路由// 注册路由
const app createApp(App)
app.use(router)
app.mount(#app)这个文件中我引入了router文件夹中的index.js文件并且使用了其中的router那么下面来看看这个index.js文件的内容。
router/index.js文件
import {createRouter, createWebHistory} from vue-router;// 路由配置
const routes [{//斜杠重定向到首页path: /,redirect: /index,},{//首页path: /index,name: index,component: () import(/views/index.vue)},{//内容页path: /content,name: content,component: () import(/views/content.vue)},]// 路由对象
const router createRouter({history: createWebHistory(),routes: routes,
})export default router // 导出供其他组件导入在这个文件中我定义了一个路由配置和一个路由对象并为其配置路由配置最后导出该组件。
view/index.vue文件
template
div classcontainerlirouter-link to/首页/router-link/lilirouter-link to/content内容页面/router-link/li
/div
/template这里我们用router-link来作为跳转的按钮当然可以在外面再套一个button添加样式
view/content.vue文件
template
div classcontainerlirouter-link to/首页/router-link/lilirouter-link to/content内容页面/router-link/li
/div
/template这里我们用router-link来作为跳转的按钮当然可以在外面再套一个button添加样式和首页一样这样点击后就可以实现跳转了
