Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由

前端开发 作者: 2024-08-20 20:55:01
前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了。制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了。 本章讲一下如何配置子路由,因为我们
<template>
divdiv class="main">
    ul>
        li><router-link :to="{name:'userdefault'}">用户中心默认</router-link></="{name:'userinfo'}">用户中心详情="{name:'userlast'}">用户中心设置router-viewscript>
export default {
    data() {
        return {
            
        }
       }           
}
>
>
  >user index page>
>user info page>
>user set page>
// 引入子路由
import Frame from '../frame/subroute.vue'
import Vue from 'vue'
import Router from 'vue-router'

 引入子路由
import Frame from '../frame/subroute.vue'

 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'



 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userSet from '../page/user/set.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',component: index
    },{
        path: '/content''/user'},{name:'userdefault',path: '/user/userdefault''userlast',path: '/user/userlast'
id="app">
       ="nav-list">
      ="nav-item" to="/">首页="/content">内容页="/user">用户中心>

 {
  name: 'app
}
style lang="scss"
  @import "./style/style";
style>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65716.html