Vue路由

---

title: “Vue路由”
createTime: 2022-01-05T09:48:52+08:00
updateTime: 2022-01-05T09:48:52+08:00
draft: false
author: “name”
tags: [“路由”]
categories: [“vue”]
description: “测试的”

一.路由的引入

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

二、路由的配置

import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入vue-router
import Home from './views/Home.vue'
import About from './views/About.vue'
import aboutRouter from './views/AboutRouter.vue'
import aboutRouter2 from './views/AboutRouter2.vue'

// import Navigation from 'vue-navigation' // 这是我的router的切换动画

// Vue.use(Navigation, { Router })

Vue.use(Router) // Vue全局使用Router

export default new Router({
  routes: [
    { // 每一个链接都是一个对象
      path: '/', // 链接路径
      name: 'home', // 路由名称
      component: Home, // 对应组件的模版
      meta: {
        index: 1,
        title: '首页',
        keepAlive: true
      }
    },
    {
      path: '/myAbout',
      name: 'about', // 路由名称
      component: About,
      redirect: '/myAbout/children', // 记得在父路由的地方增加  跳转地址
      children: [
        {
          path: 'children',
          name: 'aboutRouter',
          component: aboutRouter,
          meta: {
            index: 3,
            title: '子关系',
            keepAlive: true
          }
        }, {
          path: 'children2',
          name: 'aboutRouter2',
          component: aboutRouter2,
          meta: {
            index: 3,
            title: '子关系',
            keepAlive: true
          }
        }
      ]
    },
    {
      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.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')// 这里是 component第二种写法
    },
    {
      path: '/goback',
      redirect: '/'
    }
  ]
})

#三 路由的使用

主路由

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

##子路由

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-view></router-view>

    <router-link to="/myAbout/children22">About</router-link>
  </div>
</template>
<script>

#四、注意点

redirect和alias的区别

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

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

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

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

别名的一种注意情况

{
  path: '/',
  component: Hello,
  alias:'/home'
}

#五 路由之间的动画