一.路由的引入

  1. 下载一下就可以了
  2. 全局引入 router
    Vue.use(Router) Vue.use(Router) // Vue全局使用Router

二、路由的配置

 1import Vue from 'vue' // 引入vue
 2import Router from 'vue-router' // 引入vue-router
 3import Home from './views/Home.vue'
 4import About from './views/About.vue'
 5import aboutRouter from './views/AboutRouter.vue'
 6import aboutRouter2 from './views/AboutRouter2.vue'
 7
 8// import Navigation from 'vue-navigation' // 这是我的router的切换动画
 9
10// Vue.use(Navigation, { Router })
11
12Vue.use(Router) // Vue全局使用Router
13
14export default new Router({
15  routes: [
16    { // 每一个链接都是一个对象
17      path: '/', // 链接路径
18      name: 'home', // 路由名称
19      component: Home, // 对应组件的模版
20      meta: {
21        index: 1,
22        title: '首页',
23        keepAlive: true
24      }
25    },
26    {
27      path: '/myAbout',
28      name: 'about', // 路由名称
29      component: About,
30      redirect: '/myAbout/children', // 记得在父路由的地方增加  跳转地址
31      children: [
32        {
33          path: 'children',
34          name: 'aboutRouter',
35          component: aboutRouter,
36          meta: {
37            index: 3,
38            title: '子关系',
39            keepAlive: true
40          }
41        }, {
42          path: 'children2',
43          name: 'aboutRouter2',
44          component: aboutRouter2,
45          meta: {
46            index: 3,
47            title: '子关系',
48            keepAlive: true
49          }
50        }
51      ]
52    },
53    {
54      path: '/about',
55      name: 'about',
56      // route level code-splitting
57      // this generates a separate chunk (about.[hash].js) for this route
58      // which is lazy-loaded when the route is visited.
59      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')// 这里是 component第二种写法
60    },
61    {
62      path: '/goback',
63      redirect: '/'
64    }
65  ]
66})
67

#三 路由的使用

主路由

1  <router-link to="/">Home</router-link> |
2  <router-link to="/about">About25</router-link> |
3  <router-link to="/myabout">About</router-link> |
4  <router-link to="/goback">这是啥</router-link>
5    <router-view/>  这个是让上面的路由进行显示

##子路由

1<template>
2  <div class="about">
3    <h1>This is an about page</h1>
4    <router-view></router-view>
5
6    <router-link to="/myAbout/children22">About</router-link>
7  </div>
8</template>
9<script>

#四、注意点

redirect和alias的区别

  • redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。

  • alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。

『重定向』的意思是，当用户访问/a时，URL 将会被替换成/b，然后匹配路由为/b

/a的别名是/b，意味着，当用户访问/b 时，URL 会保持为/b，但是路由匹配则为/a，就像用户访问/a 一样。

别名的一种注意情况

1{
2  path: '/',
3  component: Hello,
4  alias:'/home'
5}

#五 路由之间的动画