Vue cli 入门补充

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_33674976

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1543415

2019独角兽企业重金招聘Python工程师标准>>>

接上次写的Vue cli入门，我们补充命名路由与嵌套路由

1、命名路由，需要修改2个文件

App.vue页面模板修改成如下：

<template>
  <div id="app1">
    <img src="./assets/logo.png">
    <router-view class="viewone" name="a"></router-view>
    <router-view class="viewtwo" name="b"></router-view>
    <!-- <router-view ></router-view> -->
  </div>
</template>
<script>
// export default {
//   name: 'app'
// }

</script>
<style>
@import './assets/css/public.css';
#app1 {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 1px solid #ccc;
  padding: 6px;
}

</style>

路由文件index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index/index'
import Manage from '../views/manage/index'
//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'

//import OtherRouter from '../views/index/otherrouter'

Vue.use(Router)
//const Foo = { template: '<div>嵌套路由</div>' }
export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'Hello',
    //   component: Hello
    // }
    {
    	path: '/',
    	name: 'Index1',
    	components:{a:Index,b:Manage},

    },
     {
        path: '/manage',
        name: 'Manage',
        //component:Manage
        components:{b:Manage},
    }
   
  ]
})

2、嵌套路由

只需修改路由index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index/index'
import Manage from '../views/manage/index'
//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'

import OtherRouter from '../views/index/otherrouter'

Vue.use(Router)
//const Foo = { template: '<div>嵌套路由</div>' }
export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'Hello',
    //   component: Hello
    // }
    {
    	path: '/',
    	name: 'Index1',
        component:Index,
        children:[{path:'', component:OtherRouter}]
    	//components:{a:Index,b:Manage},
        //children:[{path:'', component:Foo}]
    },
     {
        path: '/manage',
        name: 'Manage',
        component:Manage
        //components:{b:Manage},
    }
   
  ]
})

转载于:https://my.oschina.net/u/2612473/blog/1543415