首页  思维导图  详情

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>
  <p>index</p>
  <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 '跳转页面不刷新的问题解决