Vue——注册子路由

125 阅读1分钟

注册子路由:

在注册路由的地方写children:[],在children:[]括号里面填写子路由,和在routes=[]填写路由一样的写法。

router.index.js文件中:

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../views/Home/home.vue'
Vue.use(VueRouter)
//注册路由
const routes = [
  {
    path: '/',
    name: 'home', 
    component: home
  },
  {
    path: '/login',
    name: 'login',
    // 异步组件
    component: () => import( '../views/Login/login.vue'),
    
    // 重定向
    // 用户输入的是login路由,帮它重定向到/login/a2
    redirect:"/login/a2",
    // 注册子路由:写法和routes是一样的
    children:[
      {
        path:"a",
        name:"a",
        component:()=>import("../views/Login/a/a1.vue")
    },
    {
      path:"a1",
      name:"a",
      component:()=>import("../views/Login/a/a2.vue")
  },
  {
    // 注意1:/代表的是根路径,也就是http://localhost:8081
    // 注意2:必须加载完它的父组件,才能加载它
    // 也就是必须先加载login,才能加载a2
    // 也就是path:"/login/a2"
    path:"/login/a2",
    name:"a",
    component:()=>import("../views/Login/a/a3.vue")
}]
  },
  {
    // 当用户输入一些我们并没有正常过的网址时,就可以,让它直接跳转到首页
    path:"/*",
    component:home
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

补充:

1.路由重定向:redirect:"/login/a2",就是将当前路由重定向到/login/a2页面。

2.解决用户路由地址输入错误,找不到页面的问题:注册路由{path:"/*", component:home}

3.在注册子路由时,注意path不要加“/”,“/”代表根路径,如果想要加上“/”,需加上子路由的父路由才行。

image.png

注意:使用子路由和使用路由的方法一致:

image.png