vue路由嵌套完整步骤
1.建一个文件夹,里面放三个文件pages文件夹,里面存放接下来需要展示的组件router文件夹,里面存放index.js ,在里面设置路由规则app.vue父组件2.在app.vue文件设置内容<template><div><p><router-link to="/home">主页</router-link> &am
·
1.建一个文件夹,里面放三个文件
pages文件夹,里面存放接下来需要展示的组件
router文件夹,里面存放index.js ,在里面设置路由规则
app.vue父组件
2.在app.vue文件设置内容
<template>
<div>
<p>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/sport">体育</router-link>
</p>
<!-- 一级路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
3.在pages文件夹创建3个文件==>1.Home.vue 2.Sports.vue 3.News.vue
分别在各自组件中设置各自需要展示的内容
4.在router文件夹下的index.js配置路由规则
//引入插件
import VueRouter from 'vue-router'
import Vue from 'vue'
//使用插件
Vue.use(VueRouter)
//导入组件
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Sports from '../pages/Sports.vue'
//创建路由规则
const router = new VueRouter({
routes: [
{
path: '/home', //地址栏输入这个关键字
component: Home //跳转到这个组件
},
{
path: '/news',
component: News
},
{
path: '/sport',
component: Sports,
},
]
})
//导出
export default router
5.在项目文件夹的main.js设置入口
import Vue from 'vue'
import App from './45.嵌套路由/App.vue' //父组件启动
import router from './45.嵌套路由/router/index.js' //路由配置文件启动
new Vue({
router, //这里需要设置一下启用
render: h => h(App),
}).$mount('#app')
6.至此,一级路由已设置完成,接下来设置二级路由
7,在Sports.vue组件下设置内容,再创建3个组件==>1.SportsHome.vue 2.SportsCha.vue 3.SportsUSA.vue,分别设置各自组件需要展示的内容
<template>
<div>
<h2>体育改变人生</h2>
<router-link to="/homes">体育主页</router-link>
<router-link to="/china">国内</router-link>
<router-link to="/usa">国外</router-link>
<!-- 二级路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
// mounted () {
// // console.log('页面的query参数是', this.$route.query);
// },
}
</script>
<style>
</style>
8.回到index.js路由配置文件,在sports组件下添加children属性,再配置路由规则
import VueRouter from 'vue-router'
import Vue from 'vue'
//使用插件
Vue.use(VueRouter)
//导入组件
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Sports from '../pages/Sports.vue'
import SportsUSA from '../pages/SportsUSA.vue'
import SportsCha from '../pages/SportsCha.vue'
import SportsHome from '../pages/SportsHome.vue'
//创建路由规则
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/news',
component: News
},
{
path: '/sport',
component: Sports,
//体育下的二级路由
children: [
{
path: '/china',
component: SportsCha
},
{
path: '/usa',
component: SportsUSA
},
{
path: '/homes',
component: SportsHome
},
]
},
]
})
//导出
export default router
至此已完成二级嵌套,根据实际需求可进行多次嵌套
更多推荐
已为社区贡献1条内容
所有评论(0)