带你浅谈Vue路由

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

声明式导航（router-link）

0. 传参方式：

   • to = "/path?参数名=值"
   • to = "/path/值"（需在路由规则里配置/path/:参数名）

1. 如何接收路由传值？

   • $route.query.参数名
   • $route.params.参数名

2. 优点：

   • 1.自定义判断是否要加#
   • 2.自动添加类名，方便实现导航高亮

3. 用法：<router-link to = "路径" ><router-link>

Vue重定向

0. 示范：

    const routes = [
      {
        // 打开网页，默认显示组件
        path: "/",
        // 重定向
        redirect: '/find'
      }, 
    ]
   

1. 重定向一般报错301、302

Vue路由-404页面

0. 作用：找不到的路径，页面出现报错提示框

1. 配置：

    import NotFound from '@/views/NotFound'
    ​
    const routes = [
      // ...省略了其他配置
      // 404在最后(规则是从前往后逐个比较path)
      {
        path: "*",
        component: NotFound
      }
    ]
   

   页面访问地址错误的时候可以直接跳转到UI设计的404图片中

路由模式

0. 在创建路由对象时设置

1. hash模式--------有#(在地址栏显示) history模式------没有#，但需要后台配合(在地址栏显示)

2. 使用方法：

    new VueRouter（{
       routes，
       mode：’history‘
    }）
   

Vue路由-编程式导航-跳转

0. 作用：用js代码来进行跳转

0. 含义：在创建路由对象时设置

1. 如果是用name进行跳转，需要提前给路由规则配置name

2. 使用方法：

    this.#route.push({
      path:'路径'
      name:'路由名'
    })
   

3. 传参：

    this.$router.push({
      path:'路径'
      name:'路由名'
      params：{}
    })
   

   注意事项：如果发使用path跳转，会忽略params

   所以推荐组合：path + query ，name + params

Vue路由嵌套

步骤：

1. 创建了子路由对应的组件

2. .配置路由规则

        {
      children:[
         //配置规则同一级路由
             {   }
       ]
    }
        注意事项：path一般不加/开头
   

3. 在一级路由的组件中添加了一个router-view占位

Vue路由-声明式导航-类名区别

0. 路由嵌套之后，他的class有两种，可以分为

   • 精确匹配

     router-link-exact-active url中hash值路径。与href属性值完全相同，设置此类名。

   • 模糊匹配

     router-link-active url中hash值 包括href属性值这个路径

1. 场景：