Vue小白教程：路由配置（三）嵌套路由

最新推荐文章于 2024-07-04 09:10:04 发布

我是一只小晔子

最新推荐文章于 2024-07-04 09:10:04 发布

阅读量389

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_26011137/article/details/106195536

版权

这篇教程介绍了Vue.js中的嵌套路由配置，通过main.js、User.vue、UserAdd.vue和UserList.vue文件的设置，实现点击'增加用户'和'用户列表'时切换右侧子页面的功能。内容来源于IT营itying.com的大地老师Vue基础教程。

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

1.配置路由

{
  path: '/user',
  component: User,
  children:[
    { path: 'useradd', component: UserAdd },
    { path: 'userlist', component: Userlist }
  ]
}

2.在父路由里面配置子路由显示的地方添加

 <router-view></router-view>

main.js

import Vue from 'vue';
import App from './App.vue';


//引入公共的scss   注意：创建项目的时候必须用scss

import './assets/css/basic.scss';   
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
//路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import User from './components/User.vue';
import UserAdd from './components/User/UserAdd.vue';
import Userlist from './components/User/Userlist.vue';

//2.配