首页 > 其他分享 >vue路由配置

vue路由配置

时间:2024-05-16 14:31:14浏览次数:24  
标签:vue 创建 App 配置 router import 路由

一 目的

建一个vue路由

 

二 步骤

1. 安装路由,顺便打开package.json方便查看版本

npm install vue-router@4

 

2. src下创建router目录,route目录创建index.js文件

import { createRouter, createWebHistory } from "vue-router";

// 创建路由规则
const routes = [     
    {
        path:"/",
        component: ()=>import("../views/index.vue")
    },
    {
        path:"/login",
        component: ()=>import("../views/login.vue")
    }
]

// 创建路由器
const router = createRouter({
    history:createWebHistory,
    routes    //挂载路由规则
})

export default router

 

 3. main.js导入路由,注册到app实例

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  //router目录下寻找

createApp(App).use(router).mount('#app')

 

4. App.vue 文件 <template>标签中,添加<router-view />标签

 

 

 

 

标签:vue,创建,App,配置,router,import,路由
From: https://www.cnblogs.com/qxAndWorld/p/18195893

相关文章

  • vue3百科全书
    @目录2.2.【基于vite创建】(推荐)2.3.【一个简单的效果】3.Vue3核心语法3.1.【OptionsAPI与CompositionAPI】3.2.【拉开序幕的setup】setup概述setup的返回值setup与OptionsAPI的关系setup语法糖3.3.【ref创建:基本类型的响应式数据】3.4.【reactive创建:对象......
  • SpringBoot笔记:SpringBoot启动参数配置
    /usr/local/jdk/jdk1.8.0_261/bin/java-jar-server\##服务模式,linux默认是server模式,window默认是client参数-XX:+HeapDumpOnOutOfMemoryError\##当OOM发生时自动生成HeapD......
  • Nacos热更新静态变量配置
    Nacos热更新静态变量配置Springboot项目接入nacos,配置文件统一管理,但静态常量无法通过@Value注解实时热更新(如下所示)。GlobalVariables.java@ComponentpublicclassGlobalVariables{//测试热加载配置字段publicstaticStringtestInfo;@Value("${test......
  • Vue-快速启动指南-全-
    Vue快速启动指南(全)原文:zh.annas-archive.org/md5/056a1fe7509ea158cc95e0fe373880b7译者:飞龙协议:CCBY-NC-SA4.0前言直到几年前,直接DOM操作是前端开发的标准,jQuery一直引领潮流。所有这一切都随着现代JavaScript库和框架的普及而开始改变,主要是Angular和React。......
  • VueJS2-学习指南-全-
    VueJS2学习指南(全)原文:zh.annas-archive.org/md5/0B1D097C4A60D3760752681016F7F246译者:飞龙协议:CCBY-NC-SA4.0前言这本书是关于Vue.js的。我们将开始我们的旅程,试图理解Vue.js是什么,它与其他框架相比如何,以及它允许我们做什么。我们将在构建小型有趣的应用程序的同......
  • Vue3-示例-全-
    Vue3示例(全)原文:zh.annas-archive.org/md5/84EBE0BE98F4DE483EBA9EF82A25ED12译者:飞龙协议:CCBY-NC-SA4.0前言Vue是主要框架之一,拥有庞大的生态系统,并因其在开发应用时的易用性以及能够帮助你快速实现令人印象深刻的开发结果而不断增加采用率。本书探讨了最新的Vue版本......
  • Vue-与-GraphQL-应用构建指南-全-
    Vue与GraphQL应用构建指南(全)原文:zh.annas-archive.org/md5/60CC414A1AE322EC97E6A0F8A5BBE3AD译者:飞龙协议:CCBY-NC-SA4.0前言自2012年Facebook发布以来,GraphQL已经席卷了互联网。像Airbnb和Audi这样的大公司已经开始采用它,而中小型公司现在也意识到了这种基......
  • Vue3-秘籍-全-
    Vue3秘籍(全)原文:zh.annas-archive.org/md5/915E62C558C25E5846A894A1C2157B6C译者:飞龙协议:CCBY-NC-SA4.0前言Vue是一个最小的前端框架,赋予开发人员创建Web应用程序、原型、大型企业应用程序、桌面应用程序和移动应用程序的能力。Vue3是Vue的完全重写,并对框架的所......
  • VuePress-快速启动指南-全-
    VuePress快速启动指南(全)原文:zh.annas-archive.org/md5/986b9a64ec5b7230ac6d991c3d740203译者:飞龙协议:CCBY-NC-SA4.0前言VuePress自称为“Vue动力的静态站点生成器”。换句话说,VuePress是一个简单的工具,可以让您在几分钟内创建静态站点和单页应用(SPA)。在VuePress......
  • VueJS-表单构建指南-全-
    VueJS表单构建指南(全)原文:zh.annas-archive.org/md5/89D4502ECBF31F487E1AF228404A6AC0译者:飞龙协议:CCBY-NC-SA4.0前言Vue.js是世界领先和增长最快的前端开发框架之一。其平缓的学习曲线和充满活力和乐于助人的社区使其成为许多新开发人员寻求利用前端框架的力量的不二......