专栏首页前端之攻略Vue cli 入门补充 原

Vue cli 入门补充 原

接上次写的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},
    }
   
  ]
})

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nginx 防御CC攻击的两种方法 原

    CC攻击可以归为DDoS攻击的一种。他们之间都原理都是一样的,即发送大量的请求数据来导致服务器拒绝服务,是一种连接攻击。CC攻击又可分为代理CC攻击,和肉鸡CC...

    拓荒者
  • 即刻起,加速您的前端构建

    影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。

    志航
  • JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

    我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

    Fundebug
  • 开发桌面应用,自然用 Electron !

    可能很多读者会感到奇怪,本来是说 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。

    CSDN技术头条
  • 文件解析错误 SyntaxError: Unexpected token / in JSON at position 0

    在微信开发者工具上运行,发现报如上图所示的错误,打开相应.json的目录文件,发现代码被注释掉了,即main.json里空的。

    honey缘木鱼
  • 一个最简单的WebSocket hello world demo

    https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server...

    Jerry Wang
  • 移动网页广告引入mraid.js使用指南

    在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告...

    蓓蕾心晴
  • 2019 年 11 个受欢迎的 JavaScript 动画库!

    超过46K的star,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了canvas、 svg、CSS3D 和 WebGL渲...

    我就是马云飞
  • 聊聊flink的RestClusterClientConfiguration

    本文主要研究一下flink的RestClusterClientConfiguration

    codecraft
  • jquery.fileDownload.js插件导出excel

    因为使用ajax导出excel会出现问题,所以现在使用jQuery.fileDownload.js插件来解决导出excel的问题

    迅达集团

扫码关注云+社区

领取腾讯云代金券