<>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模式。

技术
今日推荐
阅读数 155
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信