vue2-router

1.基础

1.1.安装

复制代码
npm install vue-router@3.6.5

1.2.引入

复制代码
import VueRouter from "vue-router"

1.3.注册

复制代码
Vue.use(VueRouter)

1.4.创建

复制代码
const router = new VueRouter(
  {
    routes: [
      {path:'/page1', page1},
      {path:'/page2', page2}
    ]
  }
)

1.5.引用

复制代码
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

1.6.例子

复制代码
<a href="#/page1">page1</a>
<a href="#/page2">page2</a>
<router-link to="/page1">page1</router-link>
<div style=" width: 1200px; height: 200px;">
      <router-view></router-view>
</div>
相关推荐
老华带你飞5 小时前
学生请假管理|基于springboot 学生请假管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·spring
前端不太难6 小时前
如何给 RN 项目设计「不会失控」的导航分层模型
前端·javascript·架构
用户4099322502126 小时前
Vue3中v-show如何通过CSS修改display属性控制条件显示?与v-if的应用场景该如何区分?
前端·javascript·vue.js
不会聊天真君6476 小时前
CSS3(Web前端开发笔记第二期)
前端·笔记·css3
discode6 小时前
【开源项目技术分享】@host-navs 站导,一个简洁高效的网站链接导航工具站
前端
PieroPC6 小时前
Nicegui 3.4.0 可以缩小组件之间的间距 label botton input textarea
前端
写代码的皮筏艇6 小时前
数组 forEach
前端·javascript
shoubepatien7 小时前
JavaWeb_Web基础
java·开发语言·前端·数据库·intellij-idea