Vue回炉重造之router路由(更新中)
安装vue-router
npm i vue-router -S
配置
1、创建文件夹与文件
创建一个router文件夹,在文件夹中创建两个文件,分别是router.js和routes.js文件。
2、编辑文件
router.js(路由配置文件)
import Router from ‘vue-router’
import routes from ‘./routes’
export default ()=> {
return new Router({
routes,
mode:‘history’,
fallback:true //对于浏览器不支持history模式的,会自动转成hash模式
})
}
routes.js(路由页面文件)
import Index from ‘…/views/Index.vue’
import Login from ‘…/views/Login.vue’
export default [
{
path: ‘/’,
component: Index
},
{
path: ‘/login’,
component: Login
}
]
main.js(Vue入口文件)
import Vue from ‘vue’
import App from ‘./App.vue’
import Router from ‘vue-router’
import createRouter from ‘./router/router’
Vue.use(Router)
Vue.config.productionTip = false
const router = createRouter()
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119116823
Vue回炉重造之router路由(更新中)的更多相关文章
- Vue回炉重造之如何使用props、emit实现自定义双向绑定
下面我将使用Vue自带的属性实现简单的双向绑定. 下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一 ...
- Vue回炉重造之封装一个实用的人脸识别组件
前言 人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件. 资源 element UI Vue.js tracking-min.js face-min.js 源码 由于我们的电脑有的有摄 ...
- Vue回炉重造之搭建考试答卷系统
本篇章主要讲述系统搭建逻辑,有疑问的可以加微信联系我.考试系统 资源 Vue.js Element UI 第三方数据接口 业务 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答题,在每次选择都要 ...
- Vue回炉重造之三次封装axios
源码目录 在src目录下建立一个request文件夹.里面建立两个文件: http.js api.js 源码内容 http.js import axios from 'axios' // 引入axio ...
- Vue回炉重造之图片加载性能优化
前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...
- Vue回炉重造之封装防刷新考试倒计时组件
<!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2 ...
- Asp.Net SignalR 使用记录 技术回炉重造-总纲 动态类型dynamic转换为特定类型T的方案 通过对象方法获取委托_C#反射获取委托_ .net core入门-跨域访问配置
Asp.Net SignalR 使用记录 工作上遇到一个推送消息的功能的实现.本着面向百度编程的思想.网上百度了一大堆.主要的实现方式是原生的WebSocket,和SignalR,再次写一个关于A ...
- 《回炉重造 Java 基础》——集合(容器)
整体框架 绿色代表接口/抽象类:蓝色代表类. 主要由两大接口组成,一个是「Collection」接口,另一个是「Map」接口. 前言 以前刚开始学习「集合」的时候,由于没有好好预习,也没有学好基础知识 ...
- 回炉重造之重读Windows核心编程-006-线程
线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...
随机推荐
- nginx location关于root、alias配置的区别
一.首先优先级如下: = 表示精确匹配,优先级最高 ^~ 表示uri以某个常规字符串开头,用于匹配url路径(而且不对url做编码处理,例如请求/static/20%/aa,可以被规则^~ /stat ...
- 解决pycharm的爬虫乱码问题(初步了解各种编码格式)
Ascii码(American Standard Code for Information Interchange,美国信息互换标准代码):最初计算机只在美国使用时,只用8位的字节来组合出256(2的 ...
- JavaScript学习总结2-对象
JavaScript中对象除了最后一个属性以外都在结尾加逗号,同时所有属性都要在{ }内 1 <!DOCTYPE html> 2 <html lang="en"& ...
- uniapp中添加vant组件
首先是npm i vant@2 -S 下载vant包 接下来就是找到main.js引入vant 然后就是在页面中直接使用 会发现没有样式 最后再找到app.vue再style里面全局引入vant的样式 ...
- 3种方法改变this的指向
<body> <div style="width: 200px;height: 200px;hotpink;"></div> & ...
- Codeforces Round #762 (Div. 3), CDE
(C) Wrong Addition Problem - C - Codeforces 题意 定义一种计算方式, 对于a+b=c, 给出a和c, 求b 题解 因为求法是从个位求得, 先求出来的最后输 ...
- JavaScript学习①
# 今日内容 1. JavaScript基础 ## JavaScript: * 概念: 一门客户端脚本语言 * 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎 * 脚本语言:不 ...
- 2021.08.09 P5018 对称二叉树(树形结构)
2021.08.09 P5018 对称二叉树(树形结构) [P5018 NOIP2018 普及组] 对称二叉树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 求一棵子树,关 ...
- Oracle 定时任务增删改查
创建 -- 创建定时任务 DECLARE jobno NUMBER; BEGIN dbms_job.submit ( jobno, -- 定时器ID,系统自动获得 'PRC_INSERT;', -- ...
- XCTF练习题---MISC---simple_transfer
XCTF练习题---MISC---simple_transfer flag:HITB{b3d0e380e9c39352c667307d010775ca} 解题步骤: 1.观察题目,下载附件 2.经过观 ...