vue-router使用过程遇到的问题

初学vue问题记录

问题一、vue-router使用过程遇到的登录页空白问题

之前用vue-cli创建了一个vue项目，默认使用vue-router，目录结构中自带了router目录，里面有indexjs

但是当我又创建一个项目的时候默认没有使用vue-router时，后面我使用npm install vue-router安装了插件之后项目中没有自动创建router目录。查找资料显示说这种方式不会创建router目录，自己就把前面创建的项目的router目录及里面的文件拷贝过来使用。

使用的过程中，新建立的项目我自己单独写了一个Loginvue，想把这个登录页面作为首页，使用vue-router配置。我就修改了router目录的indexjs。如下：

mainjs中引入routerjs。如下：

到这里就是我找到的资料要配置登录页的，加上我不使用router-link，我就没有修改Appvue。我以为都配置完成了，就直接启动项目，发现页面空白。后来才发现Appvue中没有使用<router-view></router-view>。在Appvue加入<router-view></router-view>启动就成功显示登录页面了。

总结：使用vue-router，

1需要在router目录的indexjs维护好路由

2mainjs中引入router下文件

3Appvue中使用router-view

最后还发现了一个问题，用 >

原因是父组件请求数据时,子组件已经渲染完毕,这个时候传了一个空数组给子组件子,子组件用到父组件传过来的值而出现的报错

解决办法:

1 给子组件添加一个渲染条件,有值的时候在渲染

2 使用watch监听,数据变化时动态更新数据

3 把数据存储到vuex 读取vuex里面的数据

4 通过ref 直接给组件赋值,不过这已经是在 *** 作dom了(不建议使用)

于是我参考着改了一点点,记录一下,写得不好,仅供参考, 见谅~

---------------data中-------------------

------------------methods---------------------

引用**姐的一段话

但是，（又敲黑板！！！）我们给后台传过去了父节点，如果有反显的情况下(如：修改，查看功能)，一旦有父节点，子节点又将会全部勾选！！这种情况下又该怎么办呢？

思路如下：

1循环遍历出最深层子节点，存放在一个数组中

2将后台返回的含有父节点的数组和第一步骤遍历的数组做比较

3如果有相同值，将相同值取出来，push到一个新数组中

4利用这个新的重组的数组给Tree组件selected赋值

父---props--->子

子---props/自定义事件/全局事件总线/消息订阅与发布--->父

任意组件间通信：/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参

父组件传递：在使用子组件时，使用 v-bind：自定义接收名称="要传递的数据"

子组件接收： props:["自定义接收名称"]

父组件传递： v-on:自定义接收名称="要传递的方法"

子组件接收时自定义一个方法，在方法中触发父组件传递的方法： this$emit("自定义接收名称")

在父组件向子组件 传递方法 的基础上，给方法 增加参数 ，

也就是在子组件中触发父组件的方法时： this$emit("自定义接收名称"，需传递的数据) ，父组件中的方法也增加参数接收数据即可。

在父组件中使用子组件时，增加 ref属性并指定ref的名称 ，然后在调用方法的地方使用 thisrefsref的名称需调用的子组件方法名() 即可调用。

eg

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。

indexhtml，只有一个路由出口

[html] view plain copy

<div id="app">

<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->

<router-view></router-view>

</div>

mainjs，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

[html] view plain copy

import Vue from 'vue'

import VueRouter from 'vue-router'

Vueuse(VueRouter)

//引入两个组件

import home from "/homevue"

import game from "/gamevue"

//定义路由

const routes = [

{ path: "/", redirect: "/home" },//重定向,指向了home组件

{

path: "/home", component: home,

children: [

{ path: "/home/game", component: game }

]

}

]

//创建路由实例

const router = new VueRouter({routes})

new Vue({

el: '#app',

data: {

},

methods: {

},

router

})

homevue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

[html] view plain copy

<template>

<div>

<h3>首页</h3>

<router-link to="/home/game">

<button>显示<tton>

</router-link>

<router-view></router-view>

</div>

</template>

gamevue

[html] view plain copy

<template>

<h3>游戏</h3>

</template>

运行后的结果：

点击显示后：

vue项目中,使用了vue-router,我的场景是在一个路由中嵌套了子级路由,然后我在运行项目的时候,给出了警告:

源码为:

原来是在vue-router中,当路由有嵌套的子级路由的时候,父级路由需要一个默认的路由,不能再给其设置name属性了,我们只需要将父级路由的name属性去掉就可以了;

vue请求后端变成了前端，vue中后端返回菜单前端渲染可以首先使用indexvue文件，建立静态测试效果，遍历父节点，在侧边栏显示，字路由不为1个时的父路由，或者是为1时的子路由，遍历子节点数据，并且对数据进行深度复制，建立temp的新的子节点，将子节点作为新的父节点放入到children属性中，递归寻找其对应的子节点，执行javascript的命令，即可得到执行后的页面渲染效果。

以上就是关于vue-router使用过程遇到的问题全部的内容，包括:vue-router使用过程遇到的问题、vue keep-alive 不生效和多级（三级以上）缓存失败、vue父组件异步获取数据传值给子组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！