vue3.0-router的子路由创建,路由的传值操作,单页面多路由操作
vue3中的路由router操作:1.子路由创建2.路由的传值和取值操作3.单页面多路由
本文是对jspang-vue-router学习的个人总结
1.子路由的创建
首先我们创建三个组件,分别是hi父组件,hi1子组件1,hi2子组件二
<template>
<h2>我是大帅比{{msg}}</h2>
</template>
<script>
export default {
name:"hi",
data(){
return {
msg: "i am hi page"
}
}
}
</script>
<style>
</style>
<template>
<h2>{{msg}}</h2>
</template>
<script>
export default {
name:"hi1",
data(){
return {
msg: "i am hi1111 page"
}
}
}
</script>
<style>
</style>
<template>
<h2>{{msg}}</h2>
</template>
<script>
export default {
name:"hi2",
data(){
return {
msg: "i am hi2222 page"
}
}
}
</script>
<style>
</style>
子路由是要实现什么效果呢,就是一个页面可以显示同的界面,每个不同的界面就写在子路由里面,例如hi1页面就可以出现hi1的界面,也可以出现hi2的界面。
为了能够显示不同的子路由界面(子界面),我们需要给hi添加一个标签
<template>
<h2>我是大帅比{{msg}}</h2>
<router-view> </router-view>
</template>
<script>
export default {
name:"hi",
data(){
return {
msg: "i am hi page"
}
}
}
</script>
<style>
</style>
router-view标签搭配router-link使用,它的具体作用是:router-view 当你的路由path 与访问的地址相符时,会将指定的组件替换该 router-view -->
接下来我们需要再router->index.js中设置子路由,这也是设置子路由的关键:
import { createRouter, createWebHashHistory } from 'vue-router'
import hi from '@/components/hi.vue'
import hi1 from '@/components/hi1.vue'
import hi2 from '@/components/hi2.vue'
const routes = [
{
path:'/hi',
name:'hi',
component:hi,
children: [
{
path:'/',
name:"hi",
component:hi,
},
{
path:'/hi1',
name:"hi1",
component:hi1,
},
{
path:'/hi2',
name:"hi2",
component:hi2,
},
]
}//有子路由的话 name要设置在children里
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
-
首先需要引入组件
import hi from '@/components/hi.vue' import hi1 from '@/components/hi1.vue' import hi2 from '@/components/hi2.vue'
2.绑定子-父关系:父界面是hi,所以
{
path:'/hi',
name:'hi',
component:hi,
}
子界面是hi1和hi2,用children数组表示
children: [
{
path:'/hi1',
name:"hi1",
component:hi1,
},
{
path:'/hi2',
name:"hi2",
component:hi2,
},
]
3.接下来再APP.vue中添加路径就好了
<template>
<nav>
<router-link to="/hi">hiPage</router-link>|
<router-link to="/hi1">hiPage1</router-link>|
<router-link to="/hi2">hiPage2</router-link>|
<router-view></router-view>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
这里的是显示第一层的view,和hi中的view不太一样,hi中的是显示子路由的view
结果显示:
2.如何用路由传递和接受参数
可以用router中的name传值,但是这样传值只能传一个name,我们只介绍最常用的方法,利用router-link传递参数
传递操作:
这里拿hi1举例,在App.vue文件中
<router-link
:to="{name:'h1',params:{username:'我是h1',id:777}}">
hiPage1
</router-link>
和之前我们写的router-link不同
<router-link to="/hi1">hiPage2</router-link>|
router-link标签类似与a标签,to后面的就相当于url,只不过我们在router-index.js中设置过,如果想用router-link传递参数,首先我们要做的就是把组件的路径绑定,不同于用to=“/hi1"绑定,而是:to=”{name:‘h1’}这个name的值一定要和router中给hi1的name一致
也就是
{
path:'/hi1',
name:"hi1",
component:hi1,
},
这样我们就完成了最基本的绑定操作,然后传值操作,就利用params:{username:‘我是h1’,id:777}这种对象的格式来传递就好了
取值操作:
我们在hi1组件里进行取值操作
<template>
<h2>{{msg}}--{{$route.params.username}}--{{$route.params.id}}</h2>
<h2>{{msg}}</h2>
</template>
<script>
export default {
name:"hi1",
data(){
return {
msg: "i am hi1111 page"
}
}
}
</script>
<style>
</style>
利用$router.params.xxx来进行取值
3.单页面多路由操作
单页面多路由操作,也就是一个页面可以分成不同的部分,每个不同的部分就是一个路由,也就是一个组件。它和子路由的区别就在于子路由一直是单页面单路由,也就是说一次只能显示一个子路由。
也是用到components中的hi,hi1,hi2这三个组件,和第一节一样
单页面多路由,我们要实现的效果就是在hi页面中给分成两部分,左边部分是hi1,右边是hi2,这里要注意虽然hi1和hi2是在hi中显示的但是并没有父子关系,所以我们不能把router-view设置在hi中
要实现多路由操作需要:
在路由中设置:注意设置多路由components一定要加s
import { createRouter, createWebHashHistory } from 'vue-router'
import hi from '@/components/hi.vue'
import hi1 from '@/components/hi1.vue'
import hi2 from '@/components/hi2.vue'
const routes = [
{
path:'/hi',
name:'hi',
components:{
default:hi,
top:hi1,
bottom:hi2
}
}
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在App.vue中添加,多路由的特点,有多个router-view标签
<template>
<nav>
<router-link to="/hi">hiPage</router-link>|
<router-view></router-view>
</nav>
<router-view name="top" style="width:500px;height:200px;background- color:#1212;margin:0 auto;"></router-view>
<router-view name="bottom" style="width:500px;height:200px;background- color:#1212;margin:0 auto;">
</router-view>
</template>
给router-view添加name属性,这个属性要和router-index.js中components中设置的一样,以此完成路由和显示效果(router-view)的绑定
效果如下:
更多推荐
所有评论(0)