美文网首页
2018-12-29(02)路由基础篇

2018-12-29(02)路由基础篇

作者: 无欲而为 | 来源:发表于2018-12-29 11:07 被阅读0次

(一)router-link 和 router-view 组件

1 . vue-router作为一个插件把它引进来,new Router创建一个路由实例,传一个路由列表
2 . router-link 其实是封装了一个a 标签
3 . 一个基本的路由对象,必须包含2个属性: path,component
4 . 当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象


(二)路由配置

动态路由

5 .创建一个路由对象,name 就是一个动态路由参数

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/argu/:name',
    component: () => import('@/views/argu.vue') 
  }
]

argu.vue

<template>
  <div>
    This is Argu 
    {{$route.params.name}}
  </div>
</template>

<script>
export default {
  //
}
</script>

改变url 动态参数 name 就可以改变页面显示的内容
$route 代表当前页面加载的对应的路由对象,它里面包含一个params 参数对象有一个name 的属性

嵌套路由

6 . 创建一个 Parent.vue 嵌套 Child.vue 的组件和路由配置项 对象

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/argu/:name',
    component: () => import('@/views/Argu.vue') 
  },
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ]
  }
]

a.Parent.vue

<template>
  <div>
    This is Parent
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  //
}
</script>

<style>

</style>


b.child.vue

<template>
  <div>
    This is child
  </div>
</template>

<script>
export default {
  //
}
</script>

<style>

</style>


命名路由

a.App.vue 下,v-bind: to , 绑定一个对象

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link v-bind:to="{ name: 'about' }">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50

#nav
  padding 30px
  a
    font-weight bold
    color #2c3e50
    &.router-link-exact-active
      color #42b983
</style>


b.路由列表中添加一个 name 属性

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/argu/:name',
    component: () => import('@/views/Argu.vue') 
  },
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ]
  }
]

命名视图

如果我们想在一个页面中显示多个视图(多个router-view ),而且像让他显示在指定的位置

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/argu/:name',
    component: () => import('@/views/Argu.vue') 
  },
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ]
  },
  {
    path: '/named_view',
    components: {
      default: () => import('@/views/Child.vue'),
      email: () => import('@/views/Email.vue'),
      tel: () => import('@/views/Tel.vue'),
    } 
  }
]

(三)JS操作路由

编程式的导航

(四)重定向和别名

a. 重定向

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/argu/:name',
    component: () => import('@/views/Argu.vue') 
  },
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ]
  },
  {
    path: '/named_view',
    components: {
      default: () => import('@/views/Child.vue'),
      email: () => import('@/views/Email.vue'),
      tel: () => import('@/views/Tel.vue'),
    } 
  },
  {
    path: '/main',
    // redirect: '/'
    // redirect: {
    //   name: 'home'
    // }
    // redirect: to => {
    //   console.log(to)
    // }
    // redirect: to => {
    //   return {
    //     name: 'home'
    //   }
    // }
    // redirect: to => {
    //   return '/'
    // }
    redirect: to => '/'
  }
]

b.别名

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    alias: '/home_page',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/argu/:name',
    component: () => import('@/views/Argu.vue') 
  },
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ]
  },
  {
    path: '/named_view',
    components: {
      default: () => import('@/views/Child.vue'),
      email: () => import('@/views/Email.vue'),
      tel: () => import('@/views/Tel.vue'),
    } 
  },
  {
    path: '/main',
    // redirect: '/'
    // redirect: {
    //   name: 'home'
    // }
    // redirect: to => {
    //   console.log(to)
    // }
    // redirect: to => {
    //   return {
    //     name: 'home'
    //   }
    // }
    // redirect: to => {
    //   return '/'
    // }
    redirect: to => '/'
  }
]

相关文章

  • 2018-12-29(02)路由基础篇

    (一)router-link 和 router-view 组件 1 . vue-router作为一个插件把它引进...

  • java多线程相关

    (一) 基础篇 01.Java多线程系列--“基础篇”01之 基本概念 02.Java多线程系列--“基础篇”02...

  • Vue-Router

    Router:要实现的目的,就是将组件映射到路由,通过路由可以找到组件 基础篇 基本步骤: 定义组件 定义路由 实...

  • 07-Vue路由vue-router

    01-路由入门 02-路由嵌套

  • Nuxt.js教程(入门篇)

    目录一、路由二、视图三、异步数据四、插件 系列教程Nuxt.js教程(初识篇) 一、路由 1、基础路由 2、动态路...

  • 《Java8 实战》- 读书笔记第一章(02)

    《Java8 实战》- 读书笔记第一章(02) 2018-12-29 22:56 folder Java[http...

  • D-25操作系统基础网络章节

    一、学习网络知识方法 1.掌握基础部分 路由: 路由基础配置 路由配置(RIP OSPF BGP) 路由安全配置(...

  • Google Hacking总结

    基础篇: 进阶篇: LINK: buleshit.xyz/2017/02/06/Google搜索之高级使用篇/

  • Vue-router2.0基础实践

    基础用法: 动态路由匹配: 嵌套路由: 编程式路由: 命名路由: 命名视图:

  • 系统思维——商业篇01

    过往回顾 系统思维——基础篇01(什么是系统和系统思维?) 系统思维——基础篇02 (系统思维有什么作用?) 系统...

网友评论

      本文标题:2018-12-29(02)路由基础篇

      本文链接:https://www.haomeiwen.com/subject/kmoylqtx.html