Vue路由巢狀的使用
阿新 • • 發佈:2020-12-09
1.在路由配置頁面中引入元件。
2、在要對應的配置頁面中新增對映關係:
const routes = [ { path:'', //redirect重定向,預設開啟的路徑 redirect:'/home' }, { path:'/home', component:Home, children:[{ path:'', redirect:'message' }, { path:'message', component:HomeMessage }, { path:'news', component:HomeNews } ] }, { path:'/about', component:About }, { path:'/user/:userid', component:User } ];
3、在父元件中使用巢狀路由:
<template> <div> <h1>我是Home頁面</h1> <p>我是Home頁面</p> <router-link to="/home/message" >訊息</router-link> <router-link to="/home/news" >新聞</router-link> <router-view></router-view> </div> </template> <script> export default { name:'Home' } </script> <style scoped> </style>