Vue 学习随笔四 - 路由介绍

项目新建成功后，我们尝试着添加一个新的页面。此时，我们需要使用VUE默认的router功能，在src/router下面有个index.js文件。

默认的是下面这个样子：

其中 import 代表导入这个页面，下面对应的有一个路由的定义，初始化的时候定义了一个 "/" 的默认路径。

这时候，我们在src下添加一个pages的目录，用来存放新定义的页面，你也可以放在components下，或者自定义别的文件夹。

看一下我们的目录：

此时，我们的路由定义修改为下面的样子：

其中，mode: 'history' 是VUE2.5新增的路由模式。

转载于:https://www.cnblogs.com/szwangyu51/p/9822954.html

Vue 学习随笔四 - 路由介绍相关推荐

Vue学习随笔+商城项目【上】
更新日期:2021-02-10 晚 [新年快乐] 附:Vue学习随笔+商城项目[下] 目录(部分) (一)ES6补充 1.1块级作用域 1.1.1 什么是变量作用域 1.1.2 没有块级作用域造成的问 ...
Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾
Vue 学习第四天--第一部分 1.父组件向子组件传值 v-bind:临时变量名="父组件变量名" v-bind:value="fathervalue" 子 ...
vue学习之VueRouter 路由
文章目录 vue router 1.认识路由的概念 1.1.何为路由 1.2.后端路由阶段 1.3.前端路由阶段 1.4.前端渲染和后端渲染? 2.前端路由的规则 2.1.URL的hash 方式 2. ...
Vue 学习第四天 -2
4. Vue 操作Dom ,获得Dom节点, ref 属性, $refs ref 引用组件 ,然后实现相关数据和方法的引用,差不多就是父组件调用子组件, <body> <!-- ...
Vue学习记录07--vue路由的使用
引入vue路由: cnpm install vue-router@3.1.3 --save-dev 不要引入版本太高的路由!!!否则会出问题:项目运行后页面空白一片 (https://blog.csd ...
Vue学习之前端路由
前端路由什么是前端路由路由是根据不同的url地址展示不同的内容或页面前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的什么时候使 ...
Vue学习（四）—— vue中的ajax
文章目录第四部分 vue中的ajax 一.axios 1.安装 2.引入二.vue脚手架配置代理 1.方法一 2.方法二三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...
KeyShot学习随笔_软件介绍及使用
前言产品渲染概述产品渲染用途产品渲染是根据产品用途而开展工作,主要用于给客户推荐方案.线上电商推广及动画推广完美的产品建模.模拟真实材质.专业的布光法则,让产品渲染更具有质感且耐看,再加后期的 ...
Vue学习笔记：路由详解
路由:Hash地址与页面的对应关系. 1.vue-router的基本使用 (1)安装vue-roouter包 npm i vue-roouter@3.5.2 -S (2)创建路由模块在src源代码目 ...
VUE学习(十四)读取json文件
1.json文件内容 2.使用import导入json <script setup>import config from '../../public/config/config.json' ...

Vue 学习随笔四 - 路由介绍

Vue 学习随笔四 - 路由介绍相关推荐

最新文章

热门文章