vue子路由跳转问题

最新推荐文章于 2024-07-27 11:33:23 发布

xuxinwen32

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量6k

点赞数 1

分类专栏：前端文章标签： vue子路由跳转问题

本文链接：https://blog.csdn.net/xuxinwen32/article/details/85284584

版权

在Vue项目中遇到子路由跳转未显示内容的问题，通过创建的welcome.vue示例，发现使用children定义的子路由需在父组件内包含router-view才能正确渲染。此问题的解决方法是对Vue路由配置及组件结构的理解，对于初学者具有参考价值。

摘要由CSDN通过智能技术生成

问题大概是这样的，我这边简单的做了一个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},
    ]
  */