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>
相关推荐
RFCEO几秒前
HTML编程 课程六、:HTML5 新增多媒体标签
前端·html·html5·多媒体标签·嵌入音频、视频、动画
yanyu-yaya8 分钟前
速学兼复习之vue3章节4
前端·vue.js·前端框架
Mr-Wanter12 分钟前
vue 数据反显时数字/字母不换行导致的样式问题
前端·javascript·vue.js
梁萌19 分钟前
vue项目从npm升级为pnpm
前端·npm·node.js
修己xj20 分钟前
CSS魔法:对话生成器与奔驰骏马的创意实现
前端·css
琹箐40 分钟前
Cursor 无法使用prettier格式化
前端
觉醒大王43 分钟前
如何整理文献阅读笔记? (精读与泛读)
前端·css·笔记·深度学习·自然语言处理·html·学习方法
广州华水科技1 小时前
单北斗GNSS变形监测系统在水库安全监测中的应用与发展
前端
We་ct1 小时前
LeetCode 58. 最后一个单词的长度:两种解法深度剖析
前端·算法·leetcode·typescript
夏河始溢1 小时前
一八零、AG-UI:构建AI前端交互的统一协议
前端·人工智能·ui