首页 > 其他分享 >Vue router简单配置入门案例

Vue router简单配置入门案例

时间:2022-10-30 02:11:25浏览次数:96  
标签:vue 入门 LoginView Vue router Login 路由

{

 

注意驼峰命名法,不然会报错

 

 

}

 

 

 

1.在Views文件夹下创建Vue路由文件,例如:

<template> </template>  <script> </script>  template:表示html结构区域,script表示交互区域,style:表示装饰区域

 

 

2.完成以后,要把vue文件命名导出,之后好让别人接收他; 注意 最好和class名一致哈!

export default {
  name: "LoginView",
};

 

 3.之后,vies步骤就完成了,后面去router/index.js配置路由地址;

1.导入组件,2.生成路由

 

 1.导入组件

import LoginView from "../views/LoginView.vue";

2.生成路由

 {
    path: "/Login",
    name: "Login",
    component: LoginView,
  },

 3.最好一步去App.vue主区导入路由

 

 

<router-link to="/Login">Login</router-link>

 

标签:vue,入门,LoginView,Vue,router,Login,路由
From: https://www.cnblogs.com/ZhuAo/p/16840377.html

相关文章

  • 【转】VUE 组件的生命周期
                 ......
  • 【转】Vue Watch 侦听器
    npmiaxios-S         ......
  • Vue报错:component has been registered but not used
    原因:​​eslint​​代码检查到你注册了组件但没有使用,然后就报错了。比如代码:比如​​Vue​​​中注册了​​File​​组件,而实际上却没有使用到(直接取消注册为好): .......
  • #yyds干货盘点#Vue3.2 新指令 v-memo解析
    v-memo官方定义缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存,该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相......
  • 使用vue、elementUI开发一个js SDK
    目录背景介绍实操步骤初始化项目1.初始化vue项目2.查阅vue-cli构建目标内容3.具体操作步骤1.在package.json文件中添加命令2.添加入口文件背景介绍本文主要介绍使......
  • Vue的父子传值方法
    Vue的父子传值方法子传父要点:通过自定义事件触发父级方法来进行修改父级数据总结:1.在父组件中定义修改数据方法2.在模板中绑定触发自定义事件的事件3.调用子组件的......
  • C语言之入门讲解
    目录1C语言基础讲解1.1C语言历史1.2C语言特点1.3C语言程序结构1.3.1简单示例1.3.2编译&执行C程序2数据类型2.1概述2.2标识符2.3数据类型2.3.1整数类型2.3.2......
  • 【Echarts】Vue3 + TS 封装一个建议的Echarts组件
    <template><divref="myChartsRef":class="className":style="{height:height,width:width}":option="option"></div></template><scriptsetuplang='ts'>......
  • 【Vue3】ref, reactive, shallowRef, shallowReactive, toRaw, markRaw, readonly, sh
    ref的实现ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的getter和setterref实现响应式(对象类型)也是采用Proxy来实现(底层调用reactive方法)reac......
  • 使用vue框架的前后端分离开发打通
    在前后端混合开发的模式中,我们可以在django中的模板页面直接书写jquery的ajax语法,向后端发送请求但是在前后端分离的开发模式中,前端一般是使用vue框架进行搭建的,而vue需要......