阅读 186

Vue Router 路由

Vue Routervue router官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转;

标签导航:标签导航<router-link><router-link>是通过转义为标签进行跳转,其中router-link标签中的to属性会被转义为a标签中的href属性; 跳转到名为user路由,并传递参数userId

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
复制代码

声明式导航

       <p v-for="(item, index) in brr" :key="index">
              <router-link to="page">{{ item.name }}</router-link>
       </p>
复制代码

命名路由:

  有的时候,通过一个名称来标识一个路由显得更方便一些,所以官方为了方便我们偷懒,又给我们在路由中添加了一个name属性,命名这个属性之后我们访问这个属性就等于直接访问到路由;

    {
      path: '/page',
      name: 'page',
      component: () => import(/* webpackChunkName: "about" */ '../views/Page.vue')
     },
     
     tabClassFun(v) {
       this.$router.replace({ name: "page" });
     },
复制代码

普通路由:

router.push({ path: '/user/:userId', params: { userId: 123 }})
复制代码

其实两者并没有什么区别,只是提供了两种方式来访问路由,可以通过路径来匹配也可以通过别名来匹配;

router.push({ name: 'user', params: { userId: 123 }})
复制代码

以上就是vue路由的一些基础知识,不过大家还是可以多看一下vue router 官网

文章分类
前端
文章标签