vue监控路由变化 vue路由配置

在进行vue的开发中，有时候会出现路由及路由参数拼接乱套的问题，下面我针对我遇到的路由问题进行小小的阐述

vue路由带参数，路由有一个$route对象

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

路由对象暴露了以下属性：

$route.path
- 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。
$route.params
- 对象，包含路由中的动态片段和全匹配片段的键值对
$route.query 对象，包含路由中查询参数的键值对。
- 例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == ‘yes’ 。
$route.router
- 路由规则所属的路由器（以及其所属的组件）。
$route.matched
- 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
- 当前路径的名字，如果没有使用具名路径，则名字为空。

在页面上添加以下代码，可以显示这些路由对象的属性：

<div><p>当前路径：{{$route.path}}</p><p>当前参数：{{$route.params | json}}</p><p>路由名称：{{$route.name}}</p><p>路由查询参数：{{$route.query | json}}</p><p>路由匹配项：{{$route.matched | json}}</p>
</div>

路由配置

路由入口

 <!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. -->//基本形式<router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link>//带参数形式
<router-link :to="{ path: '/news,params:{newsid:001}">新闻002</router-link>
<router-link :to="{ path: '/news,query:{newsid:001}">新闻002</router-link>/*id是变量的时候，这么赋值*/
<router-link :to="{ path: '/news/'+newsid}">新闻002</router-link>

路由出口

 <!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>一个组件中可以有多个组件组成，可以有多个router-view，
比如页面主页顶部固定，侧边栏和中心部分不固定，分成两个组件来渲染
写法：
<router-view></router-view>
<router-view name='a'></router-view>{path: '/home',components: {default: HomeContainer,a: GuideContainer}
}

路由也有相对路径和绝对路径之说，加上/就是绝对路径，不带则是相对路径，在写子页面的时候，有时候直接用相对路径就行，根据需求必要时也可以重定向 redirect: ‘videos’

//进入父组件的时候路径拼接完整，再在父组件的基础上更换子组件的时候，直接相对路径即可
<router-link :to="{ path: '/personal/'+userid+'/videos'}"></router-link>
<router-link to='funs'></router-link>//定义路由const routes = [{ path: '/', redirect: '/home' },{path: '/personal/:id',components: {default: PersonalContainer,a: GuideContainer},beforeEnter: (to, from, next) => {next()},children: [{path: '',redirect: 'videos',component: PvideosContainer},{path: 'videos',component: PvideosContainer},{path: 'funs',component: PfunsContainer}]},
]

那么，怎么监听路由的变化呢？

使用 watch，观察路由，一旦发生变化便重新获取数据！

<script>export default {data() {return {data: {}}},methods: {fetchDate() {// 使用 axios获取数据......},created() {// 组件创建完后获取数据，// 此时 data 已经被 observed 了this.fetchDate();},watch: {// 如果路由有变化，会再次执行该方法"$route": "fetchDate"}}
</script>在组件中，通过 $route.params 来获取路由参数

参考链接：
https://www.cnblogs.com/fayin/p/6418950.html
https://blog.csdn.net/github_26672553/article/details/54861608
https://www.cnblogs.com/axl234/p/5899952.html

vue监控路由变化 vue路由配置相关推荐

Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
iis vue history 配置_Vue实战——vueRouter路由的添加与配置
接上文:vue实战--自定义基础路径,端口号,继续我们的实战项目讲解之旅.本文讲解vue核心插件--vue router. 在本项目中,使用了vue-cli3.10创建的,所以默认带了router,那 ...
vue动态路由变化页面不重新加载问题，实现方式比较简单，就是有点鸡贼
由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式将整个页面封装成一个子组件 children => formTe,参数可 ...
vue路由router的props配置
vue路由router的props配置前置知识:vue-router3路由配置和使用,适配vue2,vue-router代码模版路由props配置的作用:让路由组件更方便的接收到参数 ⚠️ 当不使 ...
Vue——路由变化页面数据不刷新问题
在项目中出现的情况是路由变化后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 情况一: 在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过route ...
vue动态路由配置，通过路由区分模块化打包配置
import Vue from 'vue'; import Router from 'vue-router'; import config from '@/config';Vue.use(Router ...
Vue — 第五天（路由）
前端路由问题导入在前面完成的资产管理案例中, 我们是把列表区域和添加表单区域实现在了一个区域.当页面功能比较复杂时,我们需要它们拆分开来:一个页面中只显示一个区域. 一个比较直观的解决方案是把它们 ...
Vue系列vue-router的动态路由使用（二）
前言首先我们来看看官方文档上是怎么解释动态路由的?走你你可以在一个路由中设置多段"路径参数",对应的值都会设置到 $route.params 中.例如: 一.什么场景下使用动态 ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...

vue监控路由变化 vue路由配置

路由配置

那么，怎么监听路由的变化呢？

vue监控路由变化 vue路由配置相关推荐

最新文章

热门文章