本节知识点
- 子路由就是比如从列表页跳转到文章页，路径是/hi/hi1这个样子的。
实现子路由
- 首先第一步在components文件夹下面创建2个文件，起名叫做Hi1.vue另外一个叫做Hi2.vue
Hi1.vue
<template>
<div class="text1">
{{message1}}
</div>
</template>
<script type="text/ecmascript-6">
export default {
name:"Hi1",
data(){
return {
message1:"这个就是Hi1页面"
}
}
}
</script>
<style scoped>
.text1{
font-size:46px;
color:red;
}
</style>
Hi2.vue
<template>
<div class="text2">
{{message2}}
</div>
</template>
<script type="text/ecmascript-6">
export default {
name:"Hi2",
data(){
return {
message2:"这个就是Hi2页面"
}
}
}
</script>
<style scoped>
.text2{
font-size:46px;
color:red;
}
</style>
特别注意的就是要是css或者JS文件太多的话可以独立出来格式就是
<style src="../assets/css2.css"></style>
<script src="xxxx"></script>
- 第二步在app.vue里面写好链接
<router-link to="/hi/hi1">跳转到hi页面下面的hi1</router-link>
<router-link to="/hi/hi2">跳转到hi页面下面的hi2</router-link>
- 第三步 重点写路由 index.js
首先需要引入两个组件
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
然后配置路由 简单来说就是加个children属性,这里千万注意了路径前面不要写/,然后在配置组件
{
path:'/hi',
name:"Hi",
component:Hi,
children:[
{path:"/",component:Hi,name:"Hi"},
{path:"hi1",component:Hi1,name:"Hi1"},
{path:"hi2",component:Hi2,name:"Hi2"},
]
}
- 第四部在 hi.vue下面加入 这样就把hi.vue打造成了一个父页面了
<router-view></router-view>
特别注意的就是模板文件里面必须要有包裹层否则router-view出不来
<template>
<div>
<div class="hello">
{{msg}}
</div>
<router-view></router-view>
</div>
</template>
