Vue Router系列之（三）几个注意点

时间：2024-02-29 20:05:41浏览次数：26

标签：Vue 系列 route 切换 router 组件 Router 路由

几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

通过组件的使用方式不同将组件划分为不同的分类：路由组件和一般组件

路由组件：靠路由规则匹配出来，由路由器帮我们渲染的组件【我们没有亲自写过这种组件标签】

一般组件：我们亲自写的组件标签

路由组件从某种意义上说相当于微型页面，是靠路由的切换实现的展示
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

路由组件切换后，原来的路由组件去哪了？

通过点击导航项切换路由组件的显示时，首先会进行当前路由组件的销毁，然后进行切换到的路由组件的挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息。

$route：当前路由组件的路由规则，每个路由组件都有，而且每个路由组件的信息是不一样的
整个应用只有一个router，可以通过组件的$router属性获取到。

$router：整个应用的路由器，整个应用只有一个，每个路由组件上的$router都是同一个

标签：Vue,系列,route,切换,router,组件,Router,路由
From： https://www.cnblogs.com/wzzzj/p/18040057

Vue Router系列之（二）Vue Router的使用步骤
使用步骤安装vue-router，命令：npmivue-router导入并应用插件//main.jsimportVueRouterfrom'vue-router'Vue.use(VueRouter)创建src/router/index.js，该文件专门用于创建整个应用的路由器//引入VueRouterimportVueRouterfrom'vue-router'//引入About、Home组......
Vue Router系列之（八）router-link 标签的replace属性
<router-link>的replace属性作用：控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，不破坏栈中的任何一条数据，不断的压入数据，replace是替换掉当前栈顶的那一条记录。路由跳转时候默认为push注：浏览器的历史记录实......
Vue Router系列之（七）路由的props配置项
路由的props配置项路由组件读取其他组件传递的参数时，是通过$route.params.id这种方式读取的，$route.params部分代码冗余度高，如何能够降低这种冗余？props配置项可以做到作用：让路由组件更方便的收到参数{ name:'xiangqing', path:'detail/:id', component:Detail,/......
Vue Router系列之（六）命名路由
命名路由命名路由：给你的路由规则起个名字作用：可以简化路由的跳转【路由层级比较多时】。如何使用给路由规则命名：{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ {name:'hello'//通......
Vue Router系列之（五）路由传参
路由传参如何给路由组件传递参数点击导航区的时候将数据带给路由组件，展示区根据数据渲染组件，渲染的都是同一个组件，只不过数据不同路由组件可以接收两种参数：query参数和params参数这两种参数的写法与Ajax中query参数和params参数的写法是一样的1.query参数传递参数<!--......
Vue Router系列之（十一）两个新的生命周期钩子
两个新的生命周期钩子缓存路由组件和定时器一起使用时，如果进行了路由跳转，本应触发在beforeDestroy钩子中清除定时器方法，但因为缓存了路由组件，就导致原来的路由组件的beforeDestroy钩子不会被触发，定时器也就不会清除作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态......
Vue Router系列之（十）缓存路由组件
缓存路由组件完善路由的技巧作用：让不展示的路由组件保持挂载，不被销毁。正常情况下，进行了路由跳转后，之前的组件会被销毁，如果之前的组件中存在input框之类的表单类组件，输入的内容也就消失了，也就是说，要保证路由跳转后不销毁之前的组件具体编码：//缓存的对象：并不是所有路......
答应我，在vue中不要滥用watch好吗？
前言上周五晚上8点，开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求，并且维护这一块业务的同事已经下班走了，所以只有我来做。虽然内心一万头草泥马在狂奔，但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉，加上还饿着肚子，在梳理代码逻辑......
Vue Router系列之（九）编程式路由导航
编程式路由导航作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活。为什么需要除了<router-link>标签之外实现路由跳转的方式？<router-link>标签最后变为<a>标签，无法实现button按钮的跳转触发路由跳转可能需要异步触发，<router-link>标签也无法实现具体编码：//$ro......
Vue Router系列之（十二）路由守卫
路由守卫作用：对路由进行权限控制，满足一定条件才能看到跳转到的路由组件分类：全局守卫、独享守卫、组件内守卫全局守卫://src/router/index.js//router：我们创建的路由器实例//router.beforeEach(function)：每一次进行路由跳转之前都会帮我们调用我们传入的函数//全......

Vue Router系列之（三）几个注意点

几个注意点

相关文章

赞助商

阅读排行