路由导航有哪几种？怎么跳转传参

1. 声明式导航 

目标: 可用全局组件router-link来替代a标签 ；

总结: 链接导航, 用router-link配合to, 实现点击切换路由 ；

特点：

1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3. router-link提供了声明式导航高亮的功能(自带类名)

跳转传参

目标: 在跳转路由时, 可以给路由对应的组件内传值 ；

在router-link上的to属性传值, 语法格式如下 ；

• /path?参数名=值

• /path/值 – 需要路由对象提前配置 path: “/path/参数名”  动态路由 ；

• 对应页面组件接收传递过来的值

  • $route.query.参数名

  • $route.params.参数名

2. 编程式导航

用JS代码跳转, 声明式导航用a标签 ；

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

跳转传参

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
        "参数名": 值
    }
    params: {
        "参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参