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

vue 专栏收录该内容
45 篇文章 0 订阅

在进行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

  • 3
    点赞
  • 0
    评论
  • 14
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值