vue路由配置

1、路由的使用

一、安装路由

npm i vue-router

二、配置路由

在根目录下创建文件夹router,在router文件夹下创建index.js文件,如下图所示vue路由配置_第1张图片

在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文件),如下图vue路由配置_第2张图片

 在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中进行路由的使用






四、效果呈现

当点击到学生路由时,如下图

vue路由配置_第3张图片

当点击学校路由时,如下图

 vue路由配置_第4张图片

 2、路由升级

一、嵌套路由的编写

在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组件,如下图

vue路由配置_第5张图片

 在person,animal路由增加标识

vue路由配置_第6张图片vue路由配置_第7张图片

 因为person,animal路由都是student下的子路由,所以在student.vue下进行修改

注意:子路由的跳转要加入父路由的路径!!!





 二、效果展示

进入学生路由后的初始状态

vue路由配置_第8张图片

当点击person路由时

 vue路由配置_第9张图片

 当点击animal路由时

vue路由配置_第10张图片

 注意地址栏的路径,有#,/student/animal

你可能感兴趣的:(vue,vue路由,vue.js,前端,javascript,前端框架)