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

#三 路由的使用

主路由

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

##子路由



                    
                    

你可能感兴趣的:(vue.js,前端,javascript,docker)