首页  思维导图  详情

Vue Router

2021-11-08 14:49:29   1  举报





AI智能生成

Vue Router学习脉络，请收藏，持续更新

Vue

Vue.js

webpack

ElementUI

作者其他创作

大纲/内容

参考资料

中文官方文档

英文官方文档

参数传递与接收

参考资料

vue-router query和params传参(接收参数)$router $route的区别

query传参

刷新不会消失

传参

this.$router.push({     path:'/xxx',     query:{         id:id     } })

接收参数

this.$route.query.id

params传参

刷新参数消失

传参

this.$router.push({     name:'xxx',     params:{         id:id     } })

接收参数

this.$route.params.id

Vue3页面跳转变化 - 没变谢谢！！！

参考资料

vue3如何使用vue-router

Vue官方文档 - 入门

<template>   index   <button @click="toHome">toHome</button> </template> <script> import { useRouter } from 'vue-router' export default {   setup () {     const router = useRouter()     const toHome = (() => {       router.push({         name: 'home'       })     })     return {       toHome     }   }, } </script> <style  scoped> </style>

说明

通过在main.js中使用 app.use(router)， 我们可以在任意组件中以 this.$router 的形式访问它， 并且以 this.$route 的形式访问当前路由：

注意

this.$router 与直接使用通过 createRouter  创建的 router 实例完全相同。 我们使用 this.$router 的原因是， 我们不想在每个需要操作路由的组件中都导入路由。

使用

this.$router.push('/dashboard')

传参参照上面，一样的

注意

传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

动态路由

参考资料

Vue router 正则表达式限制路由传参

官方文档 - 动态路由匹配

定义

动态路由以冒号开始

示例

const routes = [   // 动态字段以冒号开始   { path: '/users/:id', component: User }, ]

捕获动态路由

使用this.$route.params.变量名 （冒号后面的名字）来进行访问

动态路由 的正则匹配

参考资料

官方文档 - 路由的匹配语法

动态路由的 基本区分方式

const routes = [   // 匹配 /o/3549   { path: '/o/:orderId' },   // 匹配 /p/books   { path: '/p/:productName' }, ]

动态路由的 正则区分方式

const routes = [   // /:orderId -> 仅匹配数字   { path: '/:orderId(\\d+)' },   // /:productName -> 匹配其他任何内容   { path: '/:productName' }, ]

注意

确保转义反斜杠( \ )，就像我们对 \d (变成\\d)所做的那样， 在 JavaScript 中实际传递字符串中的反斜杠字符。

下载

npm

npm install vue-router

yarn

yarn add vue-router

开始

改写App.vue

在src下创建router目录添加index.js

import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routes = [     {         path: "/",         name: "login",         component: () => import("../components/Login")     },     {         path: "/home",         name: "home",         component: () => import("../views/Home")     } ]; const router = new VueRouter({     mode: "history",     base: process.env.BASE_URL,     routes }); export default router;

在src/main.js里面配置router

添加第一行，头部导入

import router from "./router";

添加第二行

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

参考资料

中文官网 - 入门

vue3如何使用vue-router

在src下创建router目录添加index.js

import { createRouter,createWebHashHistory} from "vue-router"; const routes = [     {         path: "/",         name: "login",         component: () => import("../components/Login")     },     {         path: "/home",         name: "home",         component: () => import("../views/Home")     } ]; const router = createRouter({   history: createWebHashHistory(),   routes: routes }) export default router

在src/main.js里面配置router

改写

createApp(App).mount('#app') -> const app = createApp() app.mount('#app')

添加第一行，头部导入

import router from "./router";

添加一行

app.use(router)

监听页面刷新

vue监听页面的刷新状态

跳转同一页面参数更新

参考

VueRouter 中' this.$router.push '跳转页面不刷新的问题解决