• 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: '/'
    }
  ]
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67

    #三 路由的使用

    主路由

      Home |
  About25 |
  About |
  这是啥
      这个是让上面的路由进行显示

    • 1
    • 2
    • 3
    • 4
    • 5

    ##子路由