首页 > 其他分享 >Vue Router4(路由)

Vue Router4(路由)

时间:2024-05-30 12:43:39浏览次数:24  
标签:5173 Vue Router4 content vue import router 路由

Vue Router 官网
** https://router.vuejs.org/zh**
安装
** npm install vue-router@4**
代码
** demo\src\router\index.js**
`import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("../views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("../views/content.vue")
    },
]

const router = createRouter({
    //使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
    //history: createWebHashHistory(), 
    history: createWebHistory(),
    routes
})

export default router`

标签:5173,Vue,Router4,content,vue,import,router,路由
From: https://www.cnblogs.com/dengtiancode/p/18222119

相关文章

  • 基于springboot+vue的家乡特色推荐系统
    开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示系统首页用户注册文章分享界面个人中心管理员登录管理员功能用户管理文章分类管理文章分享......
  • 基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的
    在做一些常规应用的时候,我们往往需要确定条件的内容,以便在后台进行区分的进行精确查询,在移动端,由于受限于屏幕界面的情况,一般会对多个指定的条件进行模糊的搜索,而这个搜索的处理,也是和前者强类型的条件查询处理类似的处理过程,因此本篇随笔探讨两种不同查询在前端界面上的展示效......
  • PyCharm创建vue例子
     1.新增文件MyVue.vue 文件内容如下:<template><divclass="hello"><h1>{{msg}}</h1></div></template><script>exportdefault{name:'MyVue',data(){return{msg:......
  • 基于Springboot + vue实现的蜗牛兼职网--附源码+论文+数据库
    基于Springboot+vue实现的蜗牛兼职网摘 要随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,蜗牛兼职网当然也不能排除在外。蜗牛兼职网是以实际运用为开发背景,运用软件工程原理和开发方法,采用springboot框架构......
  • Vue学习
    指令vuecreatevuedemo1npmrunserve一、脚手架目录文件介绍&项目运行流程yarnserve----->main.js(核心代码:1.导入vue核心包,2.导入APP.vue根组件,3.实例化Vue,将APP.vue渲染到index.html容器中)//导入了VueimportVuefrom'vue'//导入app.vue根组件importAppfrom'./......
  • 深入解析Web前端三大主流框架:Angular、React和Vue
    Web前端三大主流框架分别是Angular、React和Vue。下面我将为您详细介绍这三大框架的特点和使用指南。Angular核心概念:组件(Components):组件是Angular应用的构建块,每个组件由一个带有装饰器的类、一个HTML模板、一个CSS样式表组成。组件通过输入(@Input)和输出(@Output)装饰......
  • vue3基础上
    1.网站开发Vue3基础上1.1什么是Vue【官网】Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效的开发用户界面。无论是简单还是复杂的界面,Vue都可以胜任。Vue是一个框架,也是一个生态。其功......
  • Vue3使用Composition API实现响应式
    title:Vue3使用CompositionAPI实现响应式date:2024/5/29下午8:10:24updated:2024/5/29下午8:10:24categories:前端开发tags:Vue3CompositionRefsReactiveWatchLifecycleDebugging1.介绍CompositionAPI是Vue.js3中新增的一组API,用于在组件中组合逻辑......
  • Vue3使用Composition API实现响应式
    title:Vue3使用CompositionAPI实现响应式date:2024/5/29下午8:10:24updated:2024/5/29下午8:10:24categories:前端开发tags:Vue3CompositionRefsReactiveWatchLifecycleDebugging1.介绍CompositionAPI是Vue.js3中新增的一组API,用于在组件中组合逻辑和功......
  • 理解Vue 3响应式系统原理
    title:理解Vue3响应式系统原理date:2024/5/2815:44:47updated:2024/5/2815:44:47categories:前端开发tags:Vue3.xTypeScriptSFC优化Composition-APIRef&Reactive性能提升响应式原理第一章:Vue3简介1.1Vue3概述Vue3的诞生背景:Vue2的局限与改进需求Vue......