zoukankan      html  css  js  c++  java
  • 【VUE】2.渲染组件&重定向路由

    1.删除多余组件,使环境赶紧

      1. 整理App.vue, 删除多余内容,在template 模板区域增加一个路由占位符

    router-view:渲染路径匹配到的视图组件
    <template>
      <div id="app">
        <!--路由占位符-->
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'app'
    }
    </script>
    

      2.删除components下的所有组件

      3.删除views文件夹

      4.整理路由规则:router -> index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    // 路由规则
    const routes = [
    
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    

      5.npm run serve 启动正常

    2.渲染新的组件

      1. components -> 新增Demo1.vue, 一个组件包括3个部分:1.结构,2.行为,3.样式 , 样式scoped 表示当前样式只在当前组件中生效

    <template>
         <div>this is demo1</div>
    </template>
    
    <script>
    export default {
         
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>
    

      2. 到路由中添加路由规则 router -> index.js  

        1. 导入组件

        2.添加路由规则 :路由路径,名字,组件 :path;访问路由,component:组件

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Demo1 from '../components/Demo1.vue'
    
    Vue.use(VueRouter)
    // 路由规则
    const routes = [
      {
        path: '/demo1',
        name: 'Demo1',
        component: Demo1
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

      3.访问:http://localhost:8080/#/demo1

    3. 路由重定向

      1. 在router -> index.js 中新增一个路由规则, 访'/’的时候跳转‘/demo1’:redirect:重定向

    const routes = [
      {
        path: '/',
        redirect: '/demo1'
      },
      {
        path: '/demo1',
        name: 'Demo1',
        component: Demo1
      }
    ]

      

      

  • 相关阅读:
    Android 事件
    Android Menu
    Android ActionBar
    Android 布局
    so打包进APK
    android如何与服务器交互?
    如何检测单个APP的耗电量
    求大神给解决下,向已有的xml文件写入数据,但不覆盖文件存在的内容
    关于findViewById返回空指针的错误
    android客户端向服务器发送图片和文字,类似于发微博。能用json格式发送吗?
  • 原文地址:https://www.cnblogs.com/totoro-cat/p/12912891.html
Copyright © 2011-2022 走看看