Vue声明式路由

在vue3中的声明式路由

  <router-view class="page" />

router-view是一个视图容器 （通常叫做一个坑 用来放vue组件 ）

  <router-link to="/">首页</router-link>

router-link在浏览器中会默认渲染为 a 标签

这样在a标签里面通过href属性跳转的页面 href属性写一个#号叫锚点跳转

vue的路由跳转都是基于原生js中的 pushState这个属性 是实现锚点跳转的方法 我们也可以在网上查找关于pushState的信息

 我们通常会把他放在也页面底部 做tab 在平常情况下我们不会用a标签来写这个tab，所以我们就又用到了 router-link的另一个属性 custom 属性 来改变我们的 标签  举个例子 我把他转换为 li 标签

 <router-link to="/" custom > <li>首页</li> </router-link>

在浏览器中我们看到了 渲染成这个样子

 

但是这个时候我们 在点击li 时又无法跳转页面了 

 当我们在router-link上写上custon属性时 这个标签上面就开启了一个插槽 我们可以使用插槽内的属性

   <router-link to="/" custom v-slot="{ navigate }">
          <li @click="navigate">首页</li>
   </router-link>

这样就可以跳转

在Vue2的声明式路由

 <router-link to="/" tag="li">首页</router-link>

我们直接在router-link中写上 tag属性 ，在浏览器就变成了li标签 

这个时候看我们看到vue2的比vue3简单不少 

结合日常使用我们在选中的时候应该给我们文字添加选中色 

 我们可以看到有这样两个类名 。在我们的样式中只要写到

.router-link-exact-active {
  color: red;
}

这样就可以做到点击谁谁的颜色就是红色

router-link-exact-active是必须精确匹配到当前路由才会添加这个类名 

router-link-active是只要 当前路由包含之前点击过 路由地址的 就会有这个类名

这两个东西 在我们vue给我提供了配置它的东西 

一个是 active-class ，exact-active-class

<router-link to="/" tag="li" active-class="normal" exact-active-class="active">
首页
</router-link>

 我们在浏览器中可以看到 变成了这两个类名

 

 active-class 给匹配到的路由地址添加的类名 默认值是 router-link-active

 exact-active-class 路由地址精确匹配到的时候添加的类名 默认值是router-link-exact-active

 我们可以再vue的官网上看到这两个东西  vue2的官网

在vue3的官网上我们也可以看到插槽内的属性 很多  vue3的官网地址

我们这里用 isActive，和isExactActive  

isActive代表了 我们刚才在vue2中写的active-class 如果是true就代表他有这个类名

isExactActive就代表了另一个精确匹配到的  

  <router-link to="/" custom v-slot="{ navigate, isExactActive }">
          <li @click="navigate" :class="isExactActive ? 'active' : ''">首页</li>
        </router-link>

    <style lang="scss">
        .active {
          color: red;
        }
    </style>

        这样点击选中的时候就会有 active这个类名 和vue2的一比较vue3的更灵活 想要哪个就写哪个 

这就是声明式路由 声明式路由拥有路由跳转的所有方法 

1、 比如页面跳转到详情页 要携带参数 

  <router-link to="/detail?id=123">进入详情页</router-link>

我们可以看到可以携带参数到详情页  这种我们一般不常用

2、 我们传参是一般和query一起使用  我们可以这样写

 <router-link :to="{
      path: '/detail',
      query: {
        id: 123,
        name: 'zhangsan'
      }
    }">进入详情页</router-link>

这样我们路由里就有两个参数

3、我们这里也可以不用path路径去跳转页面   也可以用name去跳转

   <router-link to="detail?id=124">进入详情页</router-link> 

name和path都可以用作路由去跳转并且都可以携带参数

4、params不能和path合用传递参数 

     <router-link :to="{
      path: '/detail',
      params: {
        id: 123,
        name: 'zhangsan'
      }
    }">进入详情页</router-link>

这个是我们的错误写法

5、所以我们得用name来和params一起使用

<!-- 这种传参方式参数不会显示在路由地址 但是刷新页面会丢失 好处是参数是隐藏起来的地址栏中是看不到旳-->
      <router-link :to="{
      name: 'detail',
      params: {
        id: 123,
        name: 'zhangsan'
      }
     
    }">进入详情页</router-link> -->

6、这里可能有人就要问了 能不能即用query也用params  那当然是可以的 直接上代码

我们知道path和params合用传参所以我们这里用 name 

但是这种方法我们日常中并不这样用 有点鸡肋 

<router-link :to="{
      name: 'detail',
      params: {
        id: 123,
        name: 'zhangsan'
      },
      query: {
        a: '德玛西亚'
      }
    }">进入详情页</router-link> 

这就是我对vue的声明式路由的 一个总结