vue 路由相关知识记录

这里记录都是关于在实际项目用到一些关于路由的方法和技巧，记录下来希望能对大家有处帮助，你写的不对的地方，也欢迎大家留言评论，谢谢！

获取路由完整地址的api

path方法

可以识别当前页面路由的完整地址，但是获取不到路由传递过来的参数

一个地址：http://xxx/#/console/orderManage/editOrder?id=xxx

path方法获取如下
/console/orderManage/editOrder

fullpath方法

通过绑定一个fullPath，可以识别当前页面路由的完整地址，当地址发生改变(包括参数改变)则重新渲染页面(例如动态路由参数的变化)

一个地址：http://xxx/#/console/orderManage/editOrder?id=xxx

path方法获取如下
/console/orderManage/editOrder?id=xxx

fullpath实例

判断当前路由是不是a如果是a那就是显示a，不是显示b

一个地址：http://CompanyTrain/Notice/companyDetail

<p v-if="/CompanyTrain\/Notice/.test(this.$route.fullPath)">a</p>
<p v-else>b</p>

路由传参

路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。

方式一：params 传参（显示参数）

使用该方式传值的时候，同样需要子路由提前配置好参数，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child/${id}',
})

方式二：params 传参（不显示参数）

params 传参（不显示参数）这里是通过路由的别名 name 进行传值的，例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

注意：上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失

方式三：query 传参（显示参数）

query 传参（显示参数）例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child',
    query:{
    	id:123
    }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.query.id

路由监听

// 方式1、监听路由 $route 变化
export default{
    watch: {
        $route(to, from){
            console.log('路由变化了')
            console.log('当前页面路由：' + to);
            console.log('上一个路由：' + from);
        },
    }
}

// 方式2、监听路由 $route 变化, 使用handler函数
export default{
    watch: {
        '$route': { // $route可以用引号，也可以不用引号
            handler(to, from){
                console.log('路由变化了')
                console.log('当前页面路由：' + to);
                console.log('上一个路由：' + from);
            },
            deep: true, // 深度监听 对象里面某个值发生变化，也会监听的到
            immediate: true, // 第一次初始化渲染就可以监听到
        }
    }
}