首先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. Python中将变量按行写入txt文本中

    案例一: 讲数组a 循环写入名称为2.txt的文档中 # -*-coding:utf8-*- import requests from lxml import etree a=[1,2,3,4,5,6 ...

  2. springboot中使用自定义注解实现策略模式,去除工厂模式的switch或ifelse,实现新增策略代码零修改

    前言 思路与模拟业务 源码地址 https://gitee.com/houzheng1216/springboot 整体思路就是通过注解在策略类上指定约定好的type,项目启动之后将所有有注解的typ ...

  3. 性能优于JDK代理,CGLib如何实现动态代理

    按照代理的创建时期,代理类可以分为两种. 静态代理:由程序员创建或特定工具自动生成源代码,再对其编译.在程序运行前,代理类的.class文件就已经存在了. 动态代理:在程序运行时,运用反射机制动态创建 ...

  4. Tornadofx学习笔记(2)——FxRecyclerView控件的打造

    Tornadofx是基于javafx的一个kotlin框架,用来写些电脑版的小程序 基于Scroll Pane控件,仿造Android中的RecyclerView,实现的一款tornadofx的控件 ...

  5. IntelliJ IDEA 2019.3 安装+永久破解[Windows]

    IntelliJ IDEA 2019的最后一个版本发布了,听说大幅优化了运行速度,本人实测启动速度确实比以前快不少,所以赶紧安排上新版本IDEA的破解教程 系统环境:Win10 LTSC(1809) ...

  6. SpringBoot学习遇到的问题(1) - 配置文件有日志的debug模式等配置项,为什么不起作用

    这个问题困扰我近乎两天,通过查找N多资料后终于解决,写下来共享给大家. logging.level.root=DEBUG ... 一系列的日志配置项,都不起作用的原因是springboot启动加载不到 ...

  7. kubernetes从私有仓库下载遇到的坑

    1.必须要在所有的k8s节点上配置私有仓库的地址.(master和node) 2.创建secret kubectl create secret docker-registry secret名字 --d ...

  8. k3s新版本发布!支持Helm3!还有其他重要更新Highlight!

    前 言 两个月前,业界应用最为广泛的Kubernetes管理平台创建者Rancher Labs(以下简称Rancher)在KubeCon2019北美峰会上宣布,Rancher打造的轻量级Kuberne ...

  9. webdriver高级应用 -无人干预地自动上传文件

    本节主要介绍通过程序代码无人干预地上传文件附件,并进行提交操作. 1.使用send_keys方法上传文件 #!/usr/bin/env python # -*- coding: utf-8 -*- # ...

  10. 基于TensorFlow的MNIST手写数字识别-深入

    构建多层卷积神经网络时需要多组W和偏移项b,我们封装2个方法来产生W和b 初级MNIST中用0初始化W和b,这里用噪声初始化进行对称打破,防止产生梯度0,同时用一个小的正值来初始化b避免dead ne ...