zoukankan      html  css  js  c++  java
  • vue知识掌握(三)vue-router

    Vue-Router

    路由管理器,可以更好的实现单页面的应用开发。

    打开目录:src/router.index.js

    import Vue from 'vue' 
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })
    

    如上在Router里面的routes是一个数组,而我们注册的路由都是由对象的形式加入的,

      {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
          children:[
                {
    
                }
           ]
        }
    

    这里一般由四个配置参数:

    1. path:路径(这个路径是个虚拟路径,由自己自由定义,默认项目会自动加载根目录'/'
    2. name: 路由名称,这个配置是可选的,看个人需求。
    3. component: 组件名, 来源于上面的引入:import HelloWorld from '@/components/HelloWorld'
    4. children: 子路由注册可选,类似于routes也是数组

    路由注册方式一:

    在Router外部加引用import,然后import内部注册

    如:

    import HelloWorld from '@/components/HelloWorld'
    
       {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
    
    

    路由注册方式二:

    component做引入,这样可以实现赖加载

    如:

     {
          path: '/v-for',
          name: 'v-for',
          component: r => require.ensure([], () => r(require('../../docs/v-forbegood.md')))
     },
    

    路由注册方式三:

    在Router外部创建常量,常量名便是组件名,然后import内部注册

    const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
    
     {
         path: '/home',
         component: home
     },
    
  • 相关阅读:
    (原创)monitor H3C switch with cacti
    (原创)monitor Dell Powerconnec 6224 with cacti
    (转载)运行主机管理在openvswitch之上
    图片鼠标滑动实现替换
    分布式缓存(一)失效策略和缓存问题击穿,雪崩,穿透
    Spring 事务源码学习
    FactoryBean和BeanFactory
    Spring AOP 源码学习
    “两地三中心”和“双活”
    安装 geopandas 步骤
  • 原文地址:https://www.cnblogs.com/akun-2017/p/9590126.html
Copyright © 2011-2022 走看看