Vue Router
2021-11-08 14:49:29 1 举报AI智能生成
登录查看完整内容
Vue Router学习脉络，请收藏，持续更新
作者其他创作
大纲/内容
英文官方文档
中文官方文档
参考资料
vue-router query和params传参(接收参数)$router $route的区别
传参
this.$route.query.id
接收参数
刷新不会消失
query传参
this.$route.params.id
刷新参数消失
params传参
vue3如何使用vue-router
Vue官方文档 - 入门
<template> <p>index</p> <button @click=\"toHome\
login.vue
通过在main.js中使用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由：
说明
this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。我们使用 this.$router 的原因是，我们不想在每个需要操作路由的组件中都导入路由。
注意
this.$router.push('/dashboard')
传参参照上面，一样的
使用
Vue3页面跳转变化- 没变谢谢！！！
font color=\"#c41230\
参数传递与接收
Vue router 正则表达式限制路由传参
官方文档 - 动态路由匹配
动态路由以冒号开始
定义
示例
使用this.$route.params.变量名（冒号后面的名字）来进行访问
捕获动态路由
动态路由
官方文档 - 路由的匹配语法
动态路由的基本区分方式
动态路由的正则区分方式
确保转义反斜杠( \\ )，就像我们对 \\d (变成\\\\d)所做的那样，在 JavaScript 中实际传递字符串中的反斜杠字符。
动态路由的正则匹配
npm install vue-router
npm
yarn add vue-router
yarn
下载
<template> <div id=\"app\"> <router-view></router-view> </div></template>
改写App.vue
import Vue from \"vue\";import VueRouter from \"vue-router\";Vue.use(VueRouter);const routes = [ { path: \"/\
在src下创建router目录添加index.js
import router from \"./router\";
添加第一行，头部导入
new Vue({ font color=\"#f15a23\
添加第二行
在src/main.js里面配置router
Vue2
中文官网 - 入门
createApp(App).mount('#app')->const app = createApp()app.mount('#app')
改写
app.use(router)
添加一行
Vue3
开始
vue监听页面的刷新状态
监听页面刷新
VueRouter 中' this.$router.push '跳转页面不刷新的问题解决
vue中页面路由this.route.push跳转页面不刷新
解决vue Avoided redundant navigation to current location
参考
跳转同一页面参数更新
Vue在新窗口打开页面的方法
VUE项目 打开新的页面窗口
js
打开其他网站链接
新窗口打开链接
不同的历史模式
单页应用刷新后如何避免４０４？
不同你是模式
使用hash模式，不使用history模式
历史模式 -刷新404
router-link和router-view
在一个页面里我们有2个以上router-view
一个页面多个router-view与router-link
Vue Router
0 条评论
回复 删除
下一页
