首先npm安装vue-router插件,就不说了
其次:

先看下我本地的目录结构吧


第一步:在src目录下新建一个专门存放router的index.js文件
里面的内容为:

import Vue from 'vue'   //注:这句必须要有,虽然在main.js里面已经引入过Vue,但是这里不要这句的话,就直接报错了Vue is not defined
import VueRouter from 'vue-router'
import conOne from '@/views/conOne'
Vue.use(VueRouter)
export default new VueRouter({
mode:'history',
routes:[ //注:此处的方法名,记住这里是routes,不是routers,没有r,要是写成routers,控制台不会报错,就是渲染不出组件来,牢记啊!不然会让人崩溃的
{
path:'/conone',
name:'conOne',
component:conOne //注:此处容易跟着代码提示一不小心写成components,要注意,控制台报错TypeError: Cannot read property '$createElement' of undefined

} ] });

 

第二步:然后在main.js里面的内容

import Vue from 'vue'
import App from './App'
import router from './router' //import后面的router只能写成router,且首字母大写都不行,不然在下面new Vue里面注入的时候控制台会报错Cannot read property 'matched'
                     of undefined,为什么会这样,目前我也不太清楚,还望大佬指点
Vue.config.productionTip = false
new Vue({
el: '#app',
router,      //记得在这里注入引入的router
components: { App },
template: '<App/>'
})

第三步:
在项目入口文件app.vue里面加上<router-view></router-view> //不加的话控制台不报错,但是组件始终渲染不出来,以前不熟悉的时候忘了在这里写上视图容器反正纠结过很久

<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{ }
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

  容易出错的地方大概有以下几点

1.新建的router文件夹的index.js文件没有引入import Vue from 'vue'这句话,导致报错Vue is not defined

2.在new VueRouter实例中的数组变量名routes写成routers,控制台不报错,但就是渲染不出组件内容,这也是最容易忽略也最容易犯错,也是最难排查到问题原因的地方(个人认为)

3.main.js中引入router配置文件时命名变量名不是router,或者首字母写成大写,导致报错Cannot read property 'matched'

4.接着第三点在引入了router之后,容易忘记在下面new Vue实例中注入,报错Cannot read property 'matched' of undefined"

5.在app.vue里面忘了写路由视图组件<router-view></router-view>,一般来说,头脑清晰,又稍微熟悉一点路由是不会犯这个错的

vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错的更多相关文章

  1. vue router history模式开发ngnix配置

    一.前沿 现在很多用vue-router开发页面的时候,都习惯使用hash路由莫模式,如:https://xxxx/#/index/share?code=dsfsd.这种模式在做pc端开发时候挺好用的 ...

  2. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  5. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  6. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  7. 神奇!这款 Vue 后台框架居然不用手动配置路由

    前言 做 Vue 开发脱离不了路由,尤其是中大型项目,页面多且杂,在配置路由的时候总是会变得逐渐暴躁,因为费时,并且又没有什么太多技术含量,总觉得是在浪费时间. 另外如果接手了别人的项目,当业务有变更 ...

  8. 神州数码静态路由及直连网段引入到RIP协议配置(路由重定向)

    实验要求:掌握静态路由及直连网段引入协议当中的配置 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface g0/6 进入端口 i ...

  9. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

随机推荐

  1. c#数字图像处理(八)图像平移

    使图像沿水平方向和垂直方向移动 /// <summary> /// 图像平移 /// </summary> private void translation_Click(obj ...

  2. 双指针,BFS和图论(三)

    (一)图论 1.大臣的旅费 很久以前,T王国空前繁荣. 为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任 ...

  3. 创建dynamics CRM client-side (十二) - HTML Web Resource

    HTML Web Resource是我们经常使用的一个功能. 第一步, 我们先创建好一个HTML. 接下来,我们要在web resource中创建新的html web resource. 我们在tex ...

  4. jenkins 集成jmeter-简单篇

    测试用例上传至gitlab后,使用jenkins集成gitlab,并执行压测命令 执行完成后,可在jenkins中查看压测报告不同的项目创建最好创建不同的project) [集成]安装&配置& ...

  5. ArcGIS10.2安装教程

    1,首先要下载Arcgis 10.2软件,很大大约有2个多G.下载后分别全部解压. 2,首先,安装相应的LicenseManager,双击Arcgis 10.2打开安装界面,选择安装. 3,开始安装L ...

  6. 用CSS实现横向滚动条

    在进行app制作时,需要使用横向滚动条是内容展示更完善 首先,这是html代码: 这是CSS代码: 要点: 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hid ...

  7. 数据结构与算法 --- js描述队列

    js描述队列 队列的特性是只能在队尾插入元素,在队首删除元素,先进先出: 队列被用在很多地方,比如提交操作系统执行的一系列进程,打印任务池,模拟现实中的排队: //队列类 function Queue ...

  8. laravel 服务容器的由来 代码展示

    <?php /** * 目的:代码的完善来说明从 基础类的调用到 工厂类的使用 再到容器的出现的原因 * (首先要明白工厂类和容器的关系 可以理解:容器就是工厂类的升级版(为了解决类的依赖)) ...

  9. 使用自定义注解和springAOP捕获Service层异常,并处理自定义异常

    一 自定义异常 /** * 自定义参数为null异常 */ public class NoParamsException extends Exception { //用详细信息指定一个异常 publi ...

  10. 017.Python函数匿名函数

    匿名函数 lambda表达式 lambda表达式 : 用一句话来表达只具有返回值的函数,简单,方便,直截了当 # 语法: lambda 参数 : 返回值 无参数的lambda 表达式 def func ...