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