(一)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 => '/'
  }
]