015.Vue-Router

Posted Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了015.Vue-Router相关的知识，希望对你有一定的参考价值。

路由传参

01. 路由传参

（1）动态路由匹配

  • 当需要经常把某种模式匹配到所有的路由，全部都映射到同一个组件时，可以通过配置动态路由来实现

  • 动态路由匹配：在路由路径中使用动态路径参数进行匹配，其本质就是利用url传递参数

// 路由
const router = new VueRouter({
    routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
    ]
})

// 传递参数
// 1. 声明式
<router-link :to="/user/1"> 跳转到匹配路由 </router-link>

// 2. 编程式
this.$router.push({
    path: '/child/${id}',
})

（2）URL传参方式

（a）通过params显式传参

  • 路由配置：需要在路由组件中的path后配置参数，通过冒号:的形式进行标记
  • 传递参数：参数直接配置在要跳转的路由的URL路径之后
  • 接收参数：this.$route.params.参数名接收参数
// 路由
const routes = [{
    path: '/child/:id',
    name: 'Child',
    component: () => import('@/components/Child')
}]
// 传递参数
this.$router.push({
    path: '/child/foo',
})
// 接受参数
this.$route.params.id === foo

注意： /child/foo 和 /child/bar 是复用同一个组件实例Child

因此，这个组件的生命周期钩子函数不会被重复调用

// 还可以配置多个参数
const routes = [{
    path: '/user/:name/hobby/:id',
    component: UserComponent
}]

// 传递参数:这里 username 对应[:name]， userHobby 对应[:id]
// 其它字段必须完全一致，否则无法匹配
this.$router.push({
    path: '/user/userName/hobby/userHobby'
})
// 接收参数
this.$route.params.name === userName
this.$route.params.id === userHobby

（b）通过params隐式传参

  • 路由配置：路由需设置name属性来进行匹配
  • 传递参数：传参时，要将参数设置在params对象中
  • 接收参数：通过this.$route.params.参数名接收参数
// 路由
const routes = [{
    path: '/child',
    name: 'Child',
    component: () => import('@/components/Child')
}]
// 传递参数
this.$router.push({
    name: 'Child',
    params: {
        id: 1
    }
})
// 接收参数
this.$route.params.id === 1

（c）通过query传递参数

  • 路由配置：路由通过name属性，或者path属性，来匹配路由
  • 传递参数：传参时，要将参数设置在query对象中
  • 接收参数：最后通过this.$route.query.id接收参数
// 路由
const routes = [{
    path: '/child',
    name: 'Child',
    component: () => import('@/components/Child')
}]
// 传递参数（通过 name 或者 path 来匹配路由)
this.$router.push({
    path: '/child',
    query: {
        id: 1
    }
})
// 接收参数
this.$route.query.id === 1

（d） params 和 query的区别

  • params显式传参时

    • 需要在路由配置中的path后面添加参数名
    • 且参数会成为路由的一部分：/child/123
    • 页面刷新时，不会丢失参数

  • params隐式传参时

    • 需要用name属性匹配参数
    • 参数不会显示到路径上，且页面刷新时会清空参数

  • 用query传参时

    • 可以用path属性和name属性来匹配路由
    • query参数会正常显示在URL地址栏上：/child?id=123
    • 页面刷新时不会清空参数

  • 同时设置params和query对象参数时

    • 如果用name进行匹配，两个对象参数都可以传递
    • 如果用path进行匹配，只能传递query参数
    • 如果用name和path进行匹配，将以name优先
      • 即两个对象参数都可以传递

（3）props传参

  • 通过params和query进行传参，其本质都是利用URL传参，即通过改变URL进行的
    • 这样会造成参数和组件的高度耦合
  • 这时，可以利用routes的props属性对组件和参数进行解耦，提高组件的复用，同时不改变URL

（a）布尔类型

  • 路由配置：将props设置为 true，那么route.params可以通过组件定义中的属性props来接收路由参数，再通过插值表达式使用路由参数
  • 传递参数：参数配置在URL路径之后
  • 接收参数：在组件内通过props属性来接收参数
// 简单参数的传递
// 路由：配置动态路径参数,并开启 props
const routes = [{
    path: '/user/:id',
    component: User,
    props: true
}] 
// 传递参数
this.$router.push('/user/123')
// 接收参数：组件内用 props 接收参数，参数可以像 data 中的数据一样使用
const User = {
    props: ['id'],
    template: '<div>{{ id }}</div>'
}

// 复杂参数的传递
// 路由：只需开启 props
const routes = [{
    path: '/user',
    name: 'User',
    component: User,
    props: true
}]
// 传递参数
this.$router.push({
    name: 'User',
    params: {
        user: {
            name: '小黑',
            age: 18
        }
    }
})
// 接收参数
// 组件内用 props 接收参数，参数可以像 data 中的数据一样使用
const User = {
    props: ['user'],
    template: '<div>{{ user.name }} ， {{ user.age }}</div>'
}

（b）对象类型

  • 路由配置：将props设置为对象形式以存储参数，此时路由参数冒号:后面的参数失效
    • 注意：此时的props对象数据是静态的内容，即固定的数据
  • 传递参数：此时，还是可以通过params或者query的形式传递参数
    • 其接受参数的方式为：this.$route.对象参数
  • 接收参数：在组件定义中的props属性接收参数
// 路由
const routes = [{
    path: "/user/:id", // 这里的 id 将失效
    component: User,
    // 通过 对象类型配置静态参数
    props: {
        id: 123
    }
}]
// 传递参数
this.$router.push({
    ...
})
// 接收静态参数
this.id === 123

（c）函数类型

  • 路由配置：设置为函数形式

    • 该函数接受一个参数——当前路由对象route
    • 该函数会返回一个对象
    • 在函数里，可以将静态值与路由相关值进行处理
    • 可以将path属性冒号:后面的参数一起传入组件定义的props属性中
      • 此时，这个动态路径参数需要用route.params.参数来接收

  • 传递参数：参数设置再params对象中，或者query参数中

  • 接收参数：在组件内通过props属性来接收参数

    // 路由
const routes = [
    {
        path: "/user",
        component: User,
        // 函数类型，接收 route 参数
        props: route => ({
            userName: route.query.name,
            userAge: route.query.age
        })
    }
]
// 传递参数
this.$router.push({
    path: '/user',
    query: {
        name: '小黑',
        age； 18
    }
})
// 接收参数
const User = {
    props: ['userName', 'userAge'],
    template: '<div>{{ userName }} ， {{ userAge }}</div>'
}

    • 函数类型也可以获取动态路径参数，需要使用params

      注意：

      如果使用path属性进行路由匹配，那么只能配置query对象参数，params对象参数配置无效

      • 但如果path如果配置了动态路径参数，那么这个参数将会被配置在params对象中
    // 路由
const routes = [
    {
        path: "/user/:id",
        component: User,
        props: route => ({
            queryId: route.params.id // 获取动态路径参数
        })
    }
]
// 传递参数
this.$router.push({
    path: 'user/123' // 该动态路径参数会被 params 对象接收
})
// 接收参数
const User = {
    props: ['queryId'],
    template: '<div>{{ queryId }}</div>'
}

02. $route 和 $router 的区别

  • $route是获取路由信息的一个对象

    // 如：
export default {
    created(){
        let id = this.$route.params; // 获取 params对象参数,没有路由参数则为 空对象
        let query = this.$route.query; // 获取 query对象参数，没有则为 空对象
        let name = this.$route.name; // 获取 当前路由的 名称
        
        let hash = this.$route.hash; // 获取 当前路由的 hash值，包括 # ，没有则为空字符串
        let path = this.$route.path; // 获取 当前路由对象的路径---绝对路径
        let fullPath = this.$route.fullPath; // 获取 当前路由的完整URL，包含查询参数和hash的完整路径
        
        let matched = this.$route.matched; // 获取 当前路由下 路由声明的所有信息、记录
        let redirectedForm = this.$route.refirectedForm; // 获取 当前路由重定向的来源路由（如果有重定向）
    }
}

  • $router是进行路由跳转的路由实例对象

    // 如：
export default {
    methods: {
        toRoute(){
            this.$router.push({
                path: '...', // 跳转路径
                params: {}, // params参数
                query: {} // query参数
            });
            this.$router.replace({}); // 替换当前路由
            this.$router.go(1); // 前进、后退
        }
    }
}

以上是关于015.Vue-Router的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器