vue子路由跳转问题

问题大概是这样的，我这边简单的做了一个demo

import Vue from 'vue'
import ElementUI from 'element-ui'
// import '../stastic/element-ui2.4.9-index.css'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(ElementUI);import App from './App.vue'
import Welcome from './pages/welcome.vue'
import ElementLaout from './pages/element-layoutui.vue'
import Select1 from './pages/select-1.vue'
import Select2 from './pages/select-2.vue'
import Home from './pages/home.vue'const router = new VueRouter({/*routes: [{path: '/',component: Welcome},{path: '/home',component: Home},{path: '/element',component: ElementLaout},{path: '/select1',component: Select1},{path: '/select2',component: Select2},]*/// mode:'history',routes: [{path: '/list',component: Welcome,children: [{path: 'home',name: 'home',component: Home,},{path: 'element',name: 'element',component: ElementLaout,},{path: 'select1',name: 'select1',component: Select1,},{path: 'select2',name: 'select2',component: Select2,},]},]
})new Vue({router,el: '#app',render: h => h(App)
})

我用children写子路由来实现路由的跳转，但是在实际环境当中并没有任何数据返回

welcome.vue相关代码

<template><div>welcome<router-link to="/list/home">go home</router-link><router-link to="/list/element">go element-layoutui</router-link><!--<router-view></router-view>--><!--<router-view name = "home">go home</router-view>--><!--<router-view name = "element">go element-layoutui</router-view>--></div>
</template><script>export default {name: 'welcome',/*  data(){return}*/}
</script>

在网上查阅了相关资料，默认在父组件当中渲染子组件，父组件要有router-view路由视图，否则是不会进行渲染页面的，仅供大家参考

vue子路由跳转问题相关推荐

vue子路由跳转回父级，刷新部分父页面接口，push跳转
首页要确定是否是路由跳转,不局限语父子跳转子页面返回写法 this.$router.push({path: "/",//上级页面的路径query: { key: this.$ro ...
router vue 多个路径_多个vue子路由文件自动化合并的方法，
多个vue子路由文件自动化合并的方法, 1. 目录结构废话不多说,直接上图. 目录结构,如下图所示 2. 代码编写位置在router目录下面的index.js文件中写入以下代码 import Vu ...
vue之vue-router跳转
vue之vue-router跳转一.配置在初始化使用vue-cli的时候会有vue-router的安装选择,选择安装即可. 二.嵌套路由一般情况下,登录和项目页面属于同级,所以App.vue 只 ...
vue二级路由跳转后外部引入js失效问题解决方案
vue二级路由跳转后外部引入js失效问题解决方案参考文章: (1)vue二级路由跳转后外部引入js失效问题解决方案 (2)https://www.cnblogs.com/LittleT/p/9077 ...
vue实现页面跳转过渡效果 transition
vue实现页面跳转过渡效果当我们做移动端页面的页面跳转时,不想让页面跳转的那么生硬,所以需要添加过渡效果 html部分(name="fade" 这是关键一步,fade 是自定义c ...
解决开发qq音乐singer-detail组件时子路由跳转失败问题
错误现象:组件无法正确渲染原因:子路由路径写错,我写成了path:'/singer:id', 正确写法:path:':id', 因为子路由跳转时会自动加上父路由路径,所以不必写父路由
vue实现超链接跳转加平滑过度
vue实现超链接跳转加平滑过度 goAnchor(e){this.$el.querySelector(e).scrollIntoView({behavior: "smooth", ...
vue 页面回跳两个界面（返回上一页两次）
vue 页面回跳两个界面(返回上一页两次) this.$router.go(-2);
vue 项目路由跳转时，ie报错缺少')'
vue 项目路由跳转时,ie报错缺少')' 报错信息解决办法报错信息 vue项目中使用了vue-echarts,项目启动后,在chrome上路由跳转没问题,但是在ie的控制台报"缺少 ...

vue子路由跳转问题

vue子路由跳转问题相关推荐

最新文章

热门文章