安装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路由(更新中)的更多相关文章

  1. Vue回炉重造之如何使用props、emit实现自定义双向绑定

    下面我将使用Vue自带的属性实现简单的双向绑定. 下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一 ...

  2. Vue回炉重造之封装一个实用的人脸识别组件

    前言 人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件. 资源 element UI Vue.js tracking-min.js face-min.js 源码 由于我们的电脑有的有摄 ...

  3. Vue回炉重造之搭建考试答卷系统

    本篇章主要讲述系统搭建逻辑,有疑问的可以加微信联系我.考试系统 资源 Vue.js Element UI 第三方数据接口 业务 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答题,在每次选择都要 ...

  4. Vue回炉重造之三次封装axios

    源码目录 在src目录下建立一个request文件夹.里面建立两个文件: http.js api.js 源码内容 http.js import axios from 'axios' // 引入axio ...

  5. Vue回炉重造之图片加载性能优化

    前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...

  6. Vue回炉重造之封装防刷新考试倒计时组件

    <!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2 ...

  7. Asp.Net SignalR 使用记录 技术回炉重造-总纲 动态类型dynamic转换为特定类型T的方案 通过对象方法获取委托_C#反射获取委托_ .net core入门-跨域访问配置

    Asp.Net SignalR 使用记录   工作上遇到一个推送消息的功能的实现.本着面向百度编程的思想.网上百度了一大堆.主要的实现方式是原生的WebSocket,和SignalR,再次写一个关于A ...

  8. 《回炉重造 Java 基础》——集合(容器)

    整体框架 绿色代表接口/抽象类:蓝色代表类. 主要由两大接口组成,一个是「Collection」接口,另一个是「Map」接口. 前言 以前刚开始学习「集合」的时候,由于没有好好预习,也没有学好基础知识 ...

  9. 回炉重造之重读Windows核心编程-006-线程

    线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...

随机推荐

  1. Java的虚拟线程(协程)特性开启预览阶段,多线程开发的难度将大大降低

    高并发.多线程一直是Java编程中的难点,也是面试题中的要点.Java开发者也一直在尝试使用多线程来解决应用服务器的并发问题.但是多线程并不容易,为此一个新的技术出现了,这就是虚拟线程. 传统多线程的 ...

  2. Java语言学习day36--8月11日

    ###10集合迭代中的转型 A:集合迭代中的转型 a:在使用集合时,我们需要注意以下几点:  集合中存储其实都是对象的地址.  集合中可以存储基本数值吗?jdk1.5版本以后可以存储了. 因为出现 ...

  3. 支持中文!秒建 wiki 知识库的开源项目,构建私人知识网络

    不知道有没有人和我一样,觉得自建的东西是互联网上的"自留地".私人空间,有一种自己的一亩三分地随心所欲的痛快. 比如自建的博客想写什么随笔就写什么,不用取悦读者可以自娱自乐:再比如 ...

  4. python基础练习题(暂停一秒输出,并格式化当前时间)

    day5 --------------------------------------------------------------- 实例010:给人看的时间 题目 暂停一秒输出,并格式化当前时间 ...

  5. Android 12(S) 图像显示系统 - SurfaceFlinger 之 VSync - 中篇(十七)

    必读: Android 12(S) 图像显示系统 - 开篇 1 前言 这一篇文章,将继续讲解有关VSync的知识,前一篇文章 Android 12(S) 图像显示系统 - SurfaceFlinger ...

  6. Qt(QtWebEngine)加载本地网页跨域问题的总结

    目录 1. 概述 2. 详论 2.1. 传参 2.2. JS module 3. 建议 4. 参考 1. 概述 浏览器直接加载本地网页的时候,如果网页涉及到加载本地资源(如图片),会出现跨域的问题.Q ...

  7. 【问题解决】'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

    问题复述 今天项目组有人找我说之前部署的程序在测试环境没问题,到生产环境出现了奇怪的问题,点按钮没反应. 我通过腾讯会议发现他们的浏览器控制台上打出了如下错误: Access to XMLHttpRe ...

  8. 你不知道的 Linux 使用技巧

    开源Linux 一个执着于技术的公众号 1.快速跳转命令 - z 要是每次都要进入一个目录很深的文件夹下,像下面这样: # cd /root/py/auto/fabric 每次都要输入好多个目录名是不 ...

  9. slice-substring-substr-split-splice

    一.字符串slice(startIndex, endBeforeIndex) endBeforeIndex < 0,则 endBeforeIndex 为 负数,第二个参数为字符串长度加上负值,之 ...

  10. Redis源码漂流记(二)-搭建Redis调试环境

    Redis源码漂流记(二)-搭建Redis调试环境 一.目标 搭建Redis调试环境 简要理解Redis命令运转流程 二.前提 1.有一些c知识简单基础(变量命名.常用数据类型.指针等) 可以参考这篇 ...