设置路由
需要在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>