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
      }
    ]

      

      

  • 相关阅读:
    [小技巧]记录PHP错误日志
    PHP __autoload函数(自动载入类文件)的使用方法
    php5.3以前的版本安装出现Fatal error: Call to undefined function mysql_connect()
    mysqlnoinstall5.1.62win32 安装
    [php]PHP错误处理
    哈希表1
    哈希表2
    WinSock編程的多線程式控制
    编码转换 unicode gbk big5
    Parameters转换为Variant数组
  • 原文地址:https://www.cnblogs.com/totoro-cat/p/12912891.html
Copyright © 2011-2022 走看看