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

这个地方选择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. JQuery之replace以及给控件赋值

    <input type="hidden" name="ImgUrl" readonly="readonly"> <inpu ...

  2. 安装RPM包或者安装源代码包

    第十一章 安装RPM包或者安装源代码包 在windows下安装一个软件非常轻松,仅仅要双击.exe的文件,安装提示连续"下一步"就可以,然而linux系统下安装一个软件似乎并不那么 ...

  3. cocos2d-x 3.0 常见问题及解决

    我自己遇到的问题记录,会及时更新.希望对大家有帮助 1.打包图片生成plist后,假设在游戏中图片挨在一起可能会出现黑线,打包时将Extrude设为1就可以 2.Xcode环境下.更新资源后执行的时候 ...

  4. ubuntu安装go语言

    1.下载安装包 2.解压 sudo tar -zvxf go1.10.linux-amd64.tar.gz -C /usr/local 3.配置 sudo vim /etc/profile 添加 #s ...

  5. 44. Ext信息提示对话框

    转自:https://www.cnblogs.com/glsqh/p/5920500.html Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象, ...

  6. Linux进程状态查询

    进程状态详细说明 Linux进程状态详细解析 ps 的参数说明 ps 提供了很多的选项参数,常用的有以下几个:        l 长格式输出:        u 按用户名和启动时间的顺序来显示进程:  ...

  7. yii2的form表单用法

    使用表单 本章节将介绍如何创建一个从用户那搜集数据的表单页.该页将显示一个包含 name 输入框和 email 输入框的表单.当搜集完这两部分信息后,页面将会显示用户输入的信息. 为了实现这个目标,除 ...

  8. JavaScript(JS)的简单使用

    一.什么是JS(Javascript)? Javascript是一种脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的功能,为用户提供更加流畅的浏览效果. Javascript严格区分大小 ...

  9. JavaScript学习四

    2019-06-01 09:09:23 坚持,加油!!! 函数的学习 <html> <head> <script type="text/javascript&q ...

  10. NS2学习笔记(一)

    NS2有两种运行方式: 1.“脚本方式”,输入命令: ns tclscripl.tcl,其中 tclscripl.tcl 是一个Tcl脚本的文件名: 2“命令行方式”,输入命令:ns,进入NS2的命令 ...