方案一、在生成项目的时候就选择安装路由;

这个地方选择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文件里面可以将

<HelloWorld/> 删掉 改成 <router-view/>,
注意:1.在router文件夹里面的index.js文件path设置为'/',代表着首页,
   2.在index.js 里面name:'hello',要加引号,而component:hello,不要加引号;
 
 

vue项目的路由配置的更多相关文章

  1. vue项目、路由

    目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...

  2. vue项目中路由验证和相应拦截的使用

    详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...

  3. VUE 项目刷新路由指向index.html

    背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE ...

  4. 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...

  5. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

  6. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  7. VSCode中使用vue项目ESlint验证配置

    如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...

  8. vue项目eslint环境配置与vscode配置eslint

    eslint基础环境搭建 全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...

  9. vue入门--简单路由配置

    在初始化vue init webpack <工程名>时,有一步是询问是否安装vue-router,选择yes,如果没有安装的话,后面需要自己安装.然后在目录中可以看到有个文件夹叫route ...

随机推荐

  1. Nodejs创建HTTPS服务器

    Nodejs创建HTTPS服务器 从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Jav ...

  2. leetCode 60.Permutation Sequence (排列序列) 解题思路和方法

    The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  3. 2015南阳CCPC L - Huatuo's Medicine 签到

    L - Huatuo's Medicine Description Huatuo was a famous doctor. He use identical bottles to carry the ...

  4. 初识bigdata时的一些技能小贴士

    既然小豆腐如此给力,而且充分的利用主动学习的优势,已经有了迅速脑补,压倒式的优势,不过这只是表面而已,一切才刚刚开始,究竟鹿死谁手,还有待验证. 以上可以看到,小豆腐为什么拼命的要teach我们了么, ...

  5. openStack logo

  6. 在datagrid中的toolbar添加输入框

    转自:https://blog.csdn.net/u013178480/article/details/72358551 <code class="language-html" ...

  7. windows下写的脚本,在linux下执行失败

    Windows中的换行符为CRLF, 即正则表达式的rn(ASCII码为13和10), 而Unix(或Linux)换行符为LF, 即正则表达式的n. 在Windows和Linux下协同工作的时候, 往 ...

  8. P2085最小函数值(优先队列)

    P2085 最小函数值(minval) 题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有 ...

  9. JS连续滚动幻灯片:原理与实现

    什么是连续滚动幻灯片?打开一些网站的首页,你会发现有一块这样的区域:一张图片,隔一段时间滑动切换下一张:同时,图片两端各有一个小按钮,供你手动点选下一张:底部有一排小圆圈,供你选定特定的某帧图片.这就 ...

  10. [Apple开发者帐户帮助]六、配置应用服务(5.2)推送通知(APN):使用TLS证书与APN通信

    您的通知服务器可以使用TLS证书与Apple推送通知服务(APN)通信. 首先在开发者帐户中启用推送通知.接下来生成适用于开发和生产环境的APNs客户端TLS证书.然后从Mac导出客户端TLS标识并将 ...