首页 > 其他分享 >Vue前端界面的创建和路由的配置

Vue前端界面的创建和路由的配置

时间:2024-03-19 22:29:05浏览次数:32  
标签:文件 Vue 界面 url js vue import 路由

大纲:创建vue文件并访问

*创建vue文件,在views目录创建文件

*在文件的template节点中添加要显示的内容

*在route目录下的index.js文件中配置路由
   
    *使用import引入vue文件

        *配置路由

        {

                path:'/url',

                component:引入的名称

        }

*在App.vue中通过router-linker进行链接


*vue文件的页面结构,就是我们要在浏览器中实现的内容

        *位置:在view下面创建

        *命名要求:XXXXXView.vue 例如:UserLoginView.vue

<template>
    <!--显示的内容--!>
</template>
<script>
    export default{
        name:'页面名称',
        data(){
            return{
        
                //声明变量和值
                名称:值
          }

    },
        methods:{
            函数名(){
                //代码
        }
    }

}
</script>
<style scoped>
    /*css样式*/
</style>

*在router目录下的index.js中配置路由(url与vue文件的对应关系)

        *使用import引入需要的vue文件

import 名称 from '@/views/vue文件.vue'

        *配置url和组件的对应关系

        {

                path:'/url',

                compontent:名称

        }

        *例如:

{
    path:'/demoView',
    compoent:DemoView

}

        *如何访问

                *通过超链接访问

<router-link to="url">文本<router-link>

                *在js代码完成跳转

this.$router.push("/url");

标签:文件,Vue,界面,url,js,vue,import,路由
From: https://blog.csdn.net/qichengcc/article/details/136783649

相关文章

  • 前端路由history路由和hash路由的区别?原理?
    前端路由是指在单页应用程序(SPA)中通过改变URL路径来实现页面切换和导航的机制。在前端开发中,有两种主要的前端路由实现方式:基于HistoryAPI的路由(history-basedrouting)和基于哈希(Hash)的路由(hash-basedrouting)。基于HistoryAPI的路由(history-basedrouting):Histor......
  • 简历管理系统java+springboot+vue
    简历管理系统1、功能介绍1.1、演示视频2、系统部分功能展示管理员功能模块用户管理功能模块模板类型管理报名招聘管理3、系统分析技术可行性操作可行性1、功能介绍本文以Java为开发技术,实现了一个简历管理系统。主要功能:管理员登录,通过填写用户名、密码、角色......
  • 'vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件解决方法
    查看信息npmconfiglist根据prefix路径,查看是否有'vue.cmd'文件参考了这篇感觉很整齐如果没有就安装vuenpminstall-gvue再安装脚手架vue-cli//安装npminstall-g@vue/cli//或者cnpminstall-g@vue/cli//或者yarnglobaladd@vue/cli然后配置环境变......
  • linux下永久添加静态路由-不同
    linux下永久添加静态路由-不同添加路由的命令:1,routeaddrouteadd-net192.56.76.0netmask255.255.255.0deveth0#添加一条静态路由routeadddefaultgw192.168.0.1#添加默认路由routedel-net192.168.1.0/24gw192.168.0.1#删除一条路由route-n#查看路由表2,ipr......
  • vue使用JSWebrtc播放webrtc视频流
    1、下载JSWebrtc.min.js文件地址:https://github.com/kernelj/jswebrtc/tree/master/dist 或者再此路径下载 https://files.cnblogs.com/files/blogs/702532/jswebrtc.min.js?t=1710839018&download=true2、使用jswebrtc2.1文件放到public/static目录下,位置不能放错 2......
  • vue2项目升级vue3的小变化
    1、template的slot写法变化vue2:<templateslot-scope="{row,index}"slot="action">vue3:<template#action="{row,index}">2、路由页面缓存的写法变化vue2:<keep-alive:include="cacheList"><router-view/>......
  • Cisco简单配置路由器
    1.绘制小型局域网拓扑结构图 首先我们需要在Cisco中绘制小型局域网拓扑结构图,如图小型局域网拓扑结构图 路由器选择:1841  需要注意的地方:    1.PC0的FastEthernet0和Router0的FastEthernet0/0进行连接;      PC1的FastEthernet0和Rou......
  • 基于 Vue3打造前台+中台通用提效解决方案(中)
    33、实现全屏展示功能我们知道在原生dom上,提供了一些方法来供我们开启或关闭全屏:Element.requestFullscreen()Document.exitFullscreen()Document.fullscreenDocument.fullscreenElement一般浏览器使用requestFullscreen()和exitFullscreen()来实现早期版本Chrome......
  • vue3+element plus 判断文字是否溢出,溢出显示el-tooltip
    用到elementplus表格,:show-overflow-tooltip="true"属性在 "element-plus":"2.2.27",版本不支持修改el-tooltip文本的样式: 满足2点需求:①文字只有一行不显示悬浮框;②超出一行显示省略号,鼠标有悬浮框,且保留文本的换行效果。关键代码:<el-table-columnlabel="建议内容......
  • 路由器
    路由器路由器:根据路由表转发数据(有表项就转发,没有表项就丢弃)路由表的形成1.直连路由路由器会自动学习自己端口上的网段2.非直连路由A、手动配置静态路由手动去配置B、动态学习ripospfensp操作命令命令作用displayiprouting-table查看路由表displayc......