Vue路由概述

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

作用

单页面实现页面跳转

配置

vue2安装 npm i vue-router@3 默认安装4，4只支持vue3

创建一个route/index.js

import vueRouter from 'vue-router'
import about from "../pages/about"
import home from "../pages/home";

//创建一个路由器
export default new vueRouter({
    routes: [
        {
            path: '/about',
            component: about
        },
        {
            path: '/home',
            component: home
        }
    ]
})

在main.js内使用路由和配置

import Vue from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router'
import router from './router/index'
Vue.config.productionTip = false
Vue.use(vueRouter)

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

使用

route-link

    <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

route-link标签类似于a标签，用于实现路由跳转功能,属性如下

• to 配置路由跳转的地址
• active-class 当路由被选择时的效果

router-view

<router-view></router-view>

路由对应的组件，将显示在此

路由的生命周期

离开当前页面后，路由页面即销毁，进入路由页面时重新挂载

子路由

配置

在父路由下编写，path不需要再加/

import vueRouter from 'vue-router'
import about from "../pages/about"
import home from "../pages/home";
import message from "@/pages/message";
import news from "@/pages/news";

//创建一个路由器
export default new vueRouter({
    routes: [
        {
            path: '/about',
            component: about
        },
        {
            path: '/home',
            component: home,
            children: [
                {
                    path: 'message',
                    component: message
                }, {
                    path: 'news',
                    component: news
                }
            ]
        }
    ]
})

携带query参数

作用：向子路由组件内传递参数

两种写法：

        <router-link :to="`/home/message/detail?id=${m.id}&msg=${m.message}`">{{ m.message }}</router-link>

        <router-link :to="{
         path: `/home/message/detail`,
         query:{
           id: m.id,
           msg: m.message
         }
        }">{{ m.message }}
        </router-link>

接收参数

会负载到当前route上，直接使用this.$route.query.id来接收参数

携带params参数

作用

有点restful的味道

使用

在路由配置文件中声明params匹配模式：

                        {
                            name: 'detail',
                            path: 'detail/:id/:msg',
                            component: Detail
                        }

传递时：

        <router-link :to="{
         path: `/home/message/detail/${m.id}/${m.message}`
        }">{{ m.message }}
        </router-link>

也可以：

         name: 'detail',
         params:{
           id: m.id,
           msg: m.message
         }
        }">{{ m.message }}
        </router-link>

接收参数：

this.$route.params.id

命名路由

作用

为一个路由起名，跳转时可以不写路径写名字

适用于多级路由跳转，过短的路由反而不需要

用法

使用name为路由命名

                        {
                            name: 'detail',
                            path: 'detail',
                            component: Detail
                        }

在to对象内配置name说明要跳转的路由名称

        <router-link :to="{
         name: 'detail',
         query:{
           id: m.id,
           msg: m.message
         }
        }">{{ m.message }}
        </router-link>