vue多级路由和路由传参

vue一级路由如何实现

步骤一：安装插件：npm install [email protected]，版本不要太高，容易出问题

步骤二：在main.js文件引入并使用插件

import VueRouter from 'vue-router'
Vue.use(VueRouter)

步骤三：创建一个router文件夹，里面创建一个index.js文件

步骤四：index.js文件里面编写router配置项

//该文件专门用于创建整个应用的路由器
//引入VueRouter
import VueRouter from "vue-router"

// 引入路由组件
import School from '../pages/School'
import Student from '../pages/Student'

// 创建一个路由器
const router = new VueRouter({
    //路由器里面包含一堆路由routes，值为数组，每一组路由都是一个配置对象
    routes: [{
        path: '/school', //匹配路径
        component: School //查看路径对应的组件
    }, {
        path: '/student', //匹配路径
        component: Student //查看路径对应的组件
    }]
})

//暴露路由器
export default router

步骤五：在main.js文件引入路由器

//引入路由器
import router from './router'

new Vue({
    render: h => h(App),
    router: router //配置路由
}).$mount('#app')

步骤六：在组件中实现切换效果

    School
    Student
    
    

效果展示：

一级路由最终效果图

vue多级路由如何实现

注意：

• 子组件要展示的内容要写在对应的父组件的里面
• 路由匹配规则也是写在对应父路由规则内，使用children配置项
• 组件内实现切换效果时注意子级路由需带上父级路由

配置路由代码：

 routes: [{
            path: '/school', //匹配路径
            component: School //查看路径对应的组件
        },
        {
            path: '/student', //匹配路径
            component: Student, //查看路径对应的组件
            children: [{
                    path: 'boy', //子路由匹配路径,注意不加“/”了
                    component: Boy //查看路径对应的组件 
                },
                {
                    path: 'girl', //子路由匹配路径,注意不加“/”了
                    component: Girl //查看路径对应的组件
                },

            ]
        }
    ]

使用代码：

  

      
我是Student组件
      

        
        
boy
        
girl
      
     

        
      
     
  

效果展示：

多级路由最终效果图

路由的query参数

一、配置路由

        {
            path: '/student', 
            component: Student,
            children: [{
                    path: 'boy',
                    component: Boy, 
                },
                {
                    path: 'girl', 
                    component: Girl, 
                    children: [{
                        name: 'xiangqing',
                        path: 'detail', //query注意路径配置
                        component: Detail,
                    }]
                },

            ]
        }

二、传递参数

    {{n.title}}
  

三、接收参数

$route.query.id
$route.query.title

传参最终效果图 

路由的params参数

一、配置路由，声明接收参数，如果传递参数采用的是对象写法，记得配置name属性

        {
            path: '/student', 
            component: Student,
            children: [{
                    path: 'boy',
                    component: Boy, 
                },
                {
                    path: 'girl', 
                    component: Girl, 
                    children: [{
                        name: 'xiangqing',
                        path: 'detail/:id/:title', //使用占位符声明接收params参数
                        component: Detail,
                    }]
                },

            ]
        }

二、传递参数

  
  {{n.title}}  
  
  
  
  {{n.title}}
    

三、接收参数

$route.params.id
$route.params.title

---