3.19

94 阅读1分钟

设置路由

需要在index文件内设置路径,两种方式

import HomeView from '../views/HomeView.vue'这种是一进入页面就直接加载的方式

这样可以实现懒加载 { path:"/ChildB",一个对象就对应了一个路由 path就是路由的地址

  name:"ChildB",name给路由起名字
  
  
  component: () => import('../views/ChildB.vue')
 },component就是具体跳转的页面
 
 

最后在app文件内 <router -link to="/ChildB">第二</router- link>这样就设置好了路由

二级路由

在index文件的相应位置设置

{ path:"/ChildB", name:"ChildB", component: () => import('../views/ChildB.vue'), redirect:"/about/aboutchild",默认显示二级路由,因为/是根路径,about所以redirect后面的路径要写全 children:[{

  path:"aboutchild",
  
  
  name:"aboutchild",
  
  
  component: () => import('../views/AboutChild.vue')
}]
 },

然后在对应的路由内设置

二级路由的显示容器 <router -link to="/about/aboutchild">aboutchild</router -link> <router -view></router -view>