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路由配置

路由配置

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

猜你喜欢