npm i vue-router
在根目录下创建文件夹router,在router文件夹下创建index.js文件,如下图所示
在index.js文件中写入如下代码,实现创建一个路由器
import VueRouter from "vue-router"
import student from '../view/student'
import school from '../view/school'
const router=new VueRouter({
routes:[
//配置路由的路径
{
path:'/student',
component:student
},
{
path:'/school',
component:school
}
]
})
export default router;
如上图,配置好了一个路由器,里面包含了2个路由,分别为student,school 路由
在跟目录下创建view或者page文件夹,创建student,school两个路由(vue文件),如下图
在main.js中注册路由
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
el:'#app',
render: h => h(App),
router:router
})
编辑student.vue路由
我是学生路由
编辑school.vue路由
我是学校路由
在app.vue中进行路由的使用
到学生路由
到学校路由
以下是展示区域
当点击到学生路由时,如下图
当点击学校路由时,如下图
在router文件夹下的index.js文件中进行修改,同时要引入person,animal路由(与student,school路由一样引入)
注意:student下了子路由中的path没有“/”
注意:student下了子路由中的path没有“/”
注意:student下了子路由中的path没有“/”
routes:[
//配置路由的路径
{
path:'/student',
component:student,
children:[
{
path:'person',
component:person
},
{
path:'animal',
component:animal
}
]
},
{
path:'/school',
component:school
}
]
同时在view文件夹下建立person,animal组件,如下图
在person,animal路由增加标识
因为person,animal路由都是student下的子路由,所以在student.vue下进行修改
注意:子路由的跳转要加入父路由的路径!!!
我是学生路由
到person路由
到animal路由
这里时student路由的子路由展示
进入学生路由后的初始状态
当点击person路由时
当点击animal路由时
注意地址栏的路径,有#,/student/animal