Vue-Router从单文件到工程化实现中不渲染的几个原因

最新推荐文章于 2024-04-06 16:28:21 发布
最新推荐文章于 2024-04-06 16:28:21 发布
阅读量393 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37151886/article/details/107472168
版权

**项目背景简介：

学习router的时候先写了一个单文件，然后进行项目的重构的时候发现了不渲染的问题。**

vue-router：从单文件重构到Vue项目

vue-route.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>基于vue-router的案例</title>
    <style type="text/css">
      html,
      body,
      #app {
        margin: 0;
        padding: 0px;
        height: 100%;
      }
      .header {
        height: 50px;
        background-color: #545c64;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        color: #fff;
      }0
      .footer {
        height: 40px;
        line-height: 40px;
        background-color: #888;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .main {
        display: flex;
        position: absolute;
        top: 50px;
        bottom: 40px;
        width: 100%;
      }
      .content {
        flex: 1;
        text-align: center;
        height: 100%;
      }
      .left {
        flex: 0 0 20%;
        background-color: #545c64;
      }
      .left a {
        color: white;
        text-decoration: none;
      }
      .right {
        margin: 5px;
      }
      .btns {
        width: 100%;
        height: 35px;
        line-height: 35px;
        background-color: #f5f5f5;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
      }
      button {
        height: 30px;
        background-color: #ecf5ff;
        border: 1px solid lightskyblue;
        font-size: 12px;
        padding: 0 20px;
      }
      .main-content {
        margin-top: 10px;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul li {
        height: 45px;
        line-height: 45px;
        background-color: #a0a0a0;
        color: #fff;
        cursor: pointer;
        border-bottom: 1px solid #fff;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      td,
      th {
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 12px;
      }

      th {
        background-color: #ddd;
      }
    </style>
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 要被 vue 实例所控制的区域 -->
    <div id="app">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      // 定义 APP 根组件
      const App = {
        template: `<div>
          <!-- 头部区域 -->
          <header class="header">后台管理系统</header>
          <!-- 中间主体区域 -->
          <div class="main">
            <!-- 左侧菜单栏 -->
            <div class="content left">
              <ul>
                <li><router-link to="/users">用户管理</router-link></li>
                <li><router-link to="/rights">权限管理</router-link></li>
                <li><router-link to="/goods">商品管理</router-link></li>
                <li><router-link to="/orders">订单管理</router-link></li>
                <li><router-link to="/settings">系统设置</router-link></li>
              </ul>
            </div>
            <!-- 右侧内容区域 -->
            <div class="content right"><div class="main-content">
              <router-view />
            </div></div>
          </div>
          <!-- 尾部区域 -->
          <footer class="footer">版权信息</footer>
        </div>`
      }

      const Users = {
        data() {
          return {
            userlist: [
              { id: 1, name: '张三', age: 10 },
              { id: 2, name: '李四', age: 20 },
              { id: 3, name: '王五', age: 30 },
              { id: 4, name: '赵六', age: 40 }
            ]
          }
        },
        methods: {
          goDetail(id) {
            console.log(id)
            this.$router.push('/userinfo/' + id)
          }
        },
        template: `<div>
        <h3>用户管理区域</h3>
        <table>
          <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
          </thead>
          <tbody>
            <tr v-for="item in userlist" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>
                <a href="javascript:;" @click="goDetail(item.id)">详情</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>`
      }

      const UserInfo = {
        props: ['id'],
        template: `<div>
          <h5>用户详情页 --- 用户Id为：{{id}}</h5>
          <button @click="goback()">后退</button>
        </div>`,
        methods: {
          goback() {
            // 实现后退功能
            this.$router.go(-1)
          }
        }
      }

      const Rights = {
        template: `<div>
        <h3>权限管理区域</h3>
      </div>`
      }
      const Goods = {
        template: `<div>
        <h3>商品管理区域</h3>
      </div>`
      }
      const Orders = {
        template: `<div>
        <h3>订单管理区域</h3>
      </div>`
      }
      const Settings = {
        template: `<div>
        <h3>系统设置区域</h3>
      </div>`
      }

      // 创建路由对象
      const router = new VueRouter({
        routes: [
          {
            path: '/',
            component: App,
            redirect: '/users',
            children: [
              { path: '/users', component: Users },
              { path: '/userinfo/:id', component: UserInfo, props: true },
              { path: '/rights', component: Rights },
              { path: '/goods', component: Goods },
              { path: '/orders', component: Orders },
              { path: '/settings', component: Settings }
            ]
          }
        ]
      })

      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>
  • 单文件主要内容如下截图，重点注意红色的地方书写格式。

创建路由对象和路由配置(单文件)

路由部分

单文件内组件的定义方法

简单定义组件
组件user

引入路由和Vue的js文件(单文件)

最外层div

Vue项目主要文件:

项目目录如下，第一个框是7个组件的定义，其中第一个框只有HelloWorlds容易出错。第二个是默认组件和配置文件。
项目目录
main.js

index.js文件：主要配置路由(引入、安装、导出配置路由）

import Vue from 'vue'
import router from 'vue-router

import Users from '../components/day5/Users.vue'
import Settings from '../components/day5/Settings.vue'
import Orders from '../components/day5/Orders.vue'
import Goods from '../components/day5/Goods.vue'
import Rights from '../components/day5/Rights.vue'
import UserInfo from '../components/day5/UserInfo.vue'
import HelloWorlds from '../components/day5/HelloWorlds.vue'

//安装路由router
Vue.use(router);

//配置导出路由
export default new router({

    routes: [{
   path: '/',
   // component: HelloWorlds,
   redirect: '/users',
   component: HelloWorlds,
    children: [{
        path: '/users',
        component: Users
      },
      {
        path: '/userinfo/:id',
        component: UserInfo,
        props: true
      },
      {
        path: '/rights',
        component: Rights
      },
      {
        path: '/goods',
        component: Goods
      },
      {
        path: '/orders',
        component: Orders
      },
      {
        path: '/settings',
        component: Settings
      }
    ]
  }]

});

index.js下导出路由的注意书写地方:

  1. 最外层的布局组件HelloWorlds是否写错。
  2. routes是否拼错。

index.js路由文件里面的易错点
index.js路由配置文件需要注意的三个地方：引入、安装、配置导出路由。
index.js上部分排查点

App.vue里面的内容:

app.vue

HelloWorlds.vue文件内容(布局组件）

<template>
  <div>
    <!-- 头部区域 -->
    <header class="header">后台管理系统</header>
    <!-- 中间主体区域 -->
    <div class="main">
      <!-- 左侧菜单栏 -->
      <div class="content left">
        <ul>
          <li>
            <router-link to="/users">用户管理</router-link>
          </li>
          <li>
            <router-link to="/rights">权限管理</router-link>
          </li>
          <li>
            <router-link to="/goods">商品管理</router-link>
          </li>
          <li>
            <router-link to="/orders">订单管理</router-link>
          </li>
          <li>
            <router-link to="/settings">系统设置</router-link>
          </li>
        </ul>
      </div>
      <!-- 右侧内容区域 -->
      <div class="content right">
        <div class="main-content">
            <router-view></router-view>
        </div>
      </div>
    </div>
    <!-- 尾部区域 -->
    <footer class="footer">版权信息</footer>
  </div>
</template>

<script>

</script>

<style scoped>

  #app {
    margin: 0;
    padding: 0px;
    height: 100%;
  }

  .header {
    height: 50px;
    background-color: #545c64;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #fff;
  }

  0 .footer {
    height: 40px;
    line-height: 40px;
    background-color: #888;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
  }

  .main {
    display: flex;
    position: absolute;
    top: 50px;
    bottom: 40px;
    width: 100%;
  }

  .content {
    flex: 1;
    text-align: center;
    height: 100%;
  }

  .left {
    flex: 0 0 20%;
    background-color: #545c64;
  }

  .left a {
    color: white;
    text-decoration: none;
  }

  .right {
    margin: 5px;
  }

  .btns {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f5;
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
  }

  button {
    height: 30px;
    background-color: #ecf5ff;
    border: 1px solid lightskyblue;
    font-size: 12px;
    padding: 0 20px;
  }

  .main-content {
    margin-top: 10px;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul li {
    height: 45px;
    line-height: 45px;
    background-color: #a0a0a0;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #fff;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  td,
  th {
    border: 1px solid #eee;
    line-height: 35px;
    font-size: 12px;
  }

  th {
    background-color: #ddd;
  }
</style>

组件HelloWorlds模板以及，router-view的应用位置。

HelloWorlds.vue主要内容

效果图展示：

实现效果图

总结：

Vue在工程化过程中，步骤主要有三步：（配置、安装、渲染）

  1. 配置：在src目录下新建router文件夹存放配置文件,新建index.js或者router.js里面主要存放路由的配置文件，包括引入路由(import
    Vue from ‘vue’ ,import router from
    ‘vue-router’、)安装路由(Vue.use(router))、导出路由(export default new
    router)三部分
  2. 在main.js的app实例中引入路由和配置在默认vue实例app中。
  3. 在App.vue文件中使用router-view标签渲染内容。

易错点主要有:

!. 名称一定要统一，建议统一叫router，路由数组对象叫routes。
! 书写路径的时候注意组件名称是否和路由中的一致。
! 最外层的布局组件一定要加成，不能在App.vue中使用标签的形式书写，会产生不能渲染的问题。

newProxyInstance
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router子路由路径正确，渲染不成功的问题
qq_41343493的博客
11-26 2287
我在router/index.js的路径配置如下： const routes = [ { //表示默认显示首页 //cli4路由设置的path中只有"/"的话 URI为空是就会自动重定向 path: '/', name: 'Home', component: Home, //配置子路由 children: [ { //子路由不需要加/ path: 'news', name: 'new
vue-router 中router-view不能渲染的解决方法
12-08
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) }); app.vue
[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别
YUSIR 完美CODING世界
02-24 527
[Vue warn]:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 1. Vue的编译渲染过程 template --> ast --> render函数 --> VDo.
Vue路由篇之router-view内容无法渲染出来的问题，神坑!!
qq_43490372的博客
11-06 1738
最近在学习vue路由知识，在写到关于==<router-view/>==时，内容无法渲染出来，找了许久之后，才发现是一个神坑！！！ 配置路由时注意，名字定义为routes 而不是routers 否则你的也内容渲染不出来。 ...
Vue中使用router-view渲染不成功
weixin_56035334的博客
06-06 5437
在div中引入router-link标签实现路由的切换后，再在指定的位置使用router-view显示与 url 对应的组件，发现页面无法正常渲染。
vue-router页面不渲染
Blank_空白丶的博客
09-29 704
错误：无报错，存页面不显示 原因：这时候一般就是某部分的细节拼写不正确，如配置项等 我的原因： //向外默认暴露路由器对象 exportdefaultnewVueRouter({ mode:'history', routers, }) 明眼人都看出来了吧 顺手多加了个，这里应该是路径的复数，而不是路由器复数 修改后： //向外默认暴露路由器对象 exportdefaultnewVueRouter({ mode:'history', rou...
vue-生命周期+工程化开发(三)-小黑记账单
02-11
在这个“vue-生命周期+工程化开发(三)-小黑记账单”项目中，我们将探讨Vue组件的生命周期，并结合实际的“小黑记账单”应用来讲解如何在工程化开发中应用这些知识。 首先，Vue组件的生命周期可以分为几个主要阶段：...
cool-vue-vite-cli：使用vite2 vue3 axios vuex vue-router的测试演示
02-20
CSS方面，项目可能包含了对组件样式的定制和工程化的CSS处理，如使用SCSS或Less预处理器。 总结来说，"cool-vue-vite-cli"项目是一个全面展示现代前端开发流程的示例，涵盖了Vite2的快速开发特性、Vue3的新特性、...
VUE3.0脚手架搭建的最基本、简单的VUE前端工程项目，不包含router路由
01-21
本项目是一个基于 Vue 3.0 的基本脚手架工程，专为初学者设计，不包含复杂的 router 路由系统，适合学习 Vue 3 的基础概念和用法。 首先，Vue CLI 3 是一个官方提供的命令行工具，用于快速搭建 Vue 项目的结构。...
若依框架ruoyi-vue-master(vue2版)
09-10
首先，Vue.js 2.x是这个框架的核心，它是目前非常流行的一个轻量级JavaScript库，以其响应式数据绑定和组件化特性受到开发者喜爱。Vue 2引入了虚拟DOM，优化了渲染性能，并提供了更强大的生命周期钩子函数，使得...
VUE3.0脚手架构建的VUE3.0前端初始工程，包含router路由
01-21
在这个前端初始工程中，"router"模块已经集成，意味着我们可以方便地实现单页面应用的路由管理。 Vue CLI 3 提供了一个命令行界面，通过简单的指令可以创建项目、安装依赖和构建生产环境版本。在创建新项目时，我们...
vue-router无法渲染的解决方法，不止是routes写错为router偶？
wenquan19960602的博客
05-04 2051
vue-router没有渲染页面 网上内容一般问题都是将routes写成了router，而我的问题不是这个，仔细观察代码没有错误啊。 <body> <div id="app"> <ul> <li > <router-link to="/home">首页</router-link> </...
vue数据变化但页面不渲染
L1727147157的博客
11-03 730
vue
vue更新数据却不渲染页面解决方案
热门推荐
qq_33235582的博客
12-03 1万+
1.Vue不能检测通过数组索引直接修改一个数组项 原因：由于JavaScript的限制，Vue不能检测数组和对象的变化 解决办法： this.$set(arr,index,newVal) 2.选择功能选中时赋值了，但没渲染页面 场景： 点击这个没有显示“√” 解决办法： checkClick (item) { item.check =! item.check; this.$forceUpdate() }, 听说循环数据更新的层级太深，导致数据不更新，从而导致视图.
【大坑】router-view 无渲染，无报错
weixin_64210950的博客
10-18 1755
router-view 无渲染，无报错解决方案
Vue3配置好路由之后出现页面无法渲染的问题
最新发布
Ryan_202297的博客
04-06 666
vue路由使用页面无法渲染
Vue3在vue-router使用中router-link不渲染的问题
qq_45684972的博客
03-11 3723
在学vue-router的时候发现router-link根本不渲染，同样router-view啥东西都没有，在网上找了各种资料，大多都是/和\写错或者大小写错误的问题，找了一个晚上没解决。 之后开始发现不对，同样的router，为什么用script引入就可以，用yarn add就不行，重装半天找不到问题。然后突然发现新的用法，createRouter，但是一直报错，找不到该函数。 最后去npm网站上看了看两者的版本，突然发现不对，vue-router的3.5.1版本是为Vue2服务的，但是我用的是vue的3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值