国内网站设计案例欣赏,婚介网站建设,杭州市规划建设网站,强的网站建设公司排名路由的嵌套配置 文章目录 路由的嵌套配置配置一级路由 配置一级路由 创建router文件夹#xff0c;里面添加index.js文件配置以下代码#xff1a;
import Vue from vue
import VueRouter from vue-router;
import Layout from /views/Layout
import ArticleDeta…路由的嵌套配置 文章目录 路由的嵌套配置配置一级路由 配置一级路由 创建router文件夹里面添加index.js文件配置以下代码
import Vue from vue
import VueRouter from vue-router;
import Layout from /views/Layout
import ArticleDetail from /views/ArticleDetail
Vue.use(VueRouter)
//配置两个一级路由的规则
const router new VueRouter({routes: [{path: /,component: Layout},{path: /detail,component: ArticleDetail}
]
})export default router在main.js文件中我们使用我们封装好的router
import Vue from vue
import App from ./App.vue
import router from ./routerVue.config.productionTip falsenew Vue({render: h h(App),router
}).$mount(#app)
在App.vue中配置出口
templatediv classh5-wrapper!-- 路由出口 --router-view/router-view/div
/template此时一级路由配置完毕 ### 2.配置二级路由 二级路由和一级路由为嵌套关系
方法 就是通过children配置项配规则
在children配置项中配规则准备二级路由出口
routes: [{path: /,component: Layout,children: [{path: /article,component: Article},{path: /collect,component: Collect},{path: /like,component: Like},{path: /user,component: User}]},//二级路由在指定的一级路由中配置出口例如这里是首页!-- 二级路由出口匹配到的二级路由在此展示 --router-view/router-view
在那个一级路由中配置二级路由就在那个一级路由配置出口。
二级路由也就配置完毕了。
