vue router

  • 定义路由文件
javascript 复制代码
//index.ts
import { createRouter, createWebHistory } from "vue-router";
import Dynamic from "./dynamic.vue";

const routes = [
  {
    path: '/p/:id',
    name: 'user',
    component: Dynamic
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router;
  • vue app中使用
javascript 复制代码
import router from 'index'

const app = createApp(mainPage)
app.use(router)
  • 跳转方法
html 复制代码
<template>
  <router-link :to="{ name: 'user', params: { id: 'erina' } }" style='color: black;'>
    User
  </router-link>
  <router-view :key="$route.fullPath"></router-view>
</template>

javascript 复制代码
import { useRouter } from "vue-router";
const router = useRouter()
router.push({
  name: 'user',
  params: { id: 'id' }
})

说明:

  • vue-router适用于SPA页面元素跳转
  • router元素是复用的,<router-view :key="$route.fullPath">用来刷新元素
相关推荐
Vaclee1 分钟前
JavaScript-基础语法
开发语言·javascript·ecmascript
拉不动的猪23 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程40 分钟前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app1 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html