vue点击按钮实现页面跳转
1.安装vue-router:
npm install vue-router
2.在main.js中引入并使用vue-router:
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')
3.在src目录下创建router.js文件,并配置路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
4.在App.vue中使用router-link组件实现页面跳转:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
在上面的代码中,我们使用了router-link组件来实现页面跳转,to属性定义了跳转的路径,
点击后会自动引导vue-router进行路由跳转。同时,在App.vue中使用了router-view组件来显示当前路由对应的组件内容。
5.在views目录下创建Home.vue和About.vue组件,用于展示不同的页面内容。
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
至此,我们就完成了一个简单的vue-router页面跳转的示例。需要注意的是,这里使用了history模式进行路由跳转,
这意味着我们需要配置服务器,以便在浏览器中刷新页面时不会出现404错误。如果不需要使用history模式,
可以将router.js中的mode属性改为hash模式。
文章来源地址https://www.toymoban.com/news/detail-530190.html
文章来源:https://www.toymoban.com/news/detail-530190.html
到了这里,关于vue点击按钮实现页面跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!