vue项目的路由配置
方案一、在生成项目的时候就选择安装路由;
这个地方选择y即可;
生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着这个'例子'往下进行;
在对新建的页面首先在这个页面进行引入,然后再配置即可;
方案二、在生成项目的时候未选择安装路由;
1.首先执行npm i vue-router --save 或者 cnpm i vue-router --save (根据个人情况是否安装淘宝镜像cnpm来选择具体使用哪个命令);
2.可以在src目录下新建文件夹router,然后在router文件夹下新建文件index.js;
3.在index.js里面首先引入Vue,然后引入Router,然后再导出(看不懂这一行的话,截个图);
,注意红色框内的变量名称如果没有特殊需求的话尽量不要更改否则会出现意外的错误;
4.在main.js注册一下router,首先引入router文件夹下面的index.js文件,然后再new Vue({})定义一下(看不懂的话截个图);
可以这样做;
也可以这样做;
还有最后一步:在app.vue文件里面可以将
vue项目的路由配置的更多相关文章
- vue项目、路由
目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...
- vue项目中路由验证和相应拦截的使用
详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...
- VUE 项目刷新路由指向index.html
背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE ...
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...
- rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签
在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- VSCode中使用vue项目ESlint验证配置
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...
- vue项目eslint环境配置与vscode配置eslint
eslint基础环境搭建 全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...
- vue入门--简单路由配置
在初始化vue init webpack <工程名>时,有一步是询问是否安装vue-router,选择yes,如果没有安装的话,后面需要自己安装.然后在目录中可以看到有个文件夹叫route ...
随机推荐
- Linux gadget驱动分析3------复合设备驱动
windows上面对usb复合设备的识别需要下面条件. “ 如果设备满足下列要求,则总线驱动程序还会报告 USB\COMPOSITE 的兼容标识符: 设备描述符的设备类字段 (bDeviceClass ...
- AD、DNS、DHCP、IIS、WINS的形象定义及关系
AD-实际是就是一个包括所有信息的数据库,和现实生活中就将其比作派出所,所有的信息都要进入他那的数据库当中(包括人员姓名(计算机名.账号.密码等) DNS就是建立起关联起好记忆的名称,比如你家的位置用 ...
- go语言笔记——数组长度不可变,但是元素值是可变的!!!
数组声明的格式是: var identifier [len]type 例如: var arr1 [5]int 在内存中的结构是: 对索引项为 i 的数组元素赋值可以这么操作:arr[i] = valu ...
- Spark 机器学习 ---TF-IDF
package Spark_MLlib import org.apache.spark.ml.feature.{HashingTF, IDF, Tokenizer} import org.apache ...
- codevs1225八数码难题(搜索·)
1225 八数码难题 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description Yours和zero在研究A*启 ...
- 【转】Java中特殊的String类型
Java中String是一个特殊的包装类数据有两种创建形式: String s = "abc"; String s = new String("abc"); 第 ...
- Java初级进阶中高级工程师必备技能
很多人学了javase以为自己学的已经很OK了,但是其实javase里边有很多的知识点是你不知道的,不管你找的是哪里的javase的视频,大多数是不会讲这些东西,而这些东西你平时业务又不会主动去接触, ...
- Django总结一
HTTPRequest与HTTPresponse 一. 1.互联网两台机器之间通行:ip.端口.协议 - 协议 - HTTP (80) - HTTPS (443) 2.浏览器输入URL一回车返回页面发 ...
- POJ 3855 计算几何·多边形重心
思路: 多边形面积->任选一个点,把多边形拆成三角,叉积一下 三角形重心->(x1+x2+x3)/3,(y1+y2+y3)/3 多边形重心公式题目中有,套一下就好了 计算多边形重心方法: ...
- 349 Intersection of Two Arrays 两个数组的交集
给定两个数组,写一个函数来计算它们的交集.例子: 给定 num1= [1, 2, 2, 1], nums2 = [2, 2], 返回 [2].提示: 每个在结果中的元素必定是唯一的. 我们 ...