Vue Router - 简介

以你之姓@ 2024-04-17 19:10 62阅读 0赞

> 是 Vue.js 官方的路由管理器。可以在任何组件内通过 this. r o u t e r 访 问 路 由 器 ， 也 可 以 通 过 t h i s . router 访问路由器，也可以通过 this. router访问路由器，也可以通过this.route 访问当前路由。

*  动态路由匹配 - 在组件中使用 **this.$route.params** 获取对应参数
 *  嵌套路由
 *  路由元信息 - meta: \{\}
 *  路由组件传参 - 配置 props: true
 *  路由懒加载 - component: () => import(’./views/Demo.vue’)
 *  导航守卫 - router.beforeEach((to, from, next) => \{\})、router.afterEach((to, from, next) => \{\})

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'demo',
          component: () => import('./views/Demo.vue'),
          meta: { 
            title: 'Demo'
          }
        },
        { 
          path: '/index',
          name: 'index',
          component: () => import('./views/Index.vue'), // 路由懒加载
          meta: { 
            title: '首页'
          }
        },
        { 
          path: '/detail/:id', // 动态路由配置
          name: 'detail',
          component: () => import('./views/Detail.vue'),
          meta: { 
            title: '详情'
    	  },
    	  props: true
    	},
      ]
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue路由简介【vue-router】

?前言??博客：【无聊大侠hello word】?✍有一点思考，有一点想法，有一点理性！✍✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍一个路由就是一...

淩亂°似流年/ 2024年05月03日 14:33/ 0 赞/ 71 阅读

相关 Vue Router 简介

Vue Router 简介；router是什么？

àì夳堔傛蜴生んèń/ 2024年04月20日 12:07/ 0 赞/ 63 阅读

相关 Vue Router - 简介

是 Vue.js 官方的路由管理器。可以在任何组件内通过 this. r o u t e r 访问路由器，也可以通过 t h i s . route...

以你之姓@/ 2024年04月17日 19:10/ 0 赞/ 63 阅读

相关 VUE router

1、VueRouter的安装 1.1、https://unpkg.com/vue-router/dist/vue-router.js下载安装。 1.2、 2、Vue

Love The Way You Lie/ 2023年06月06日 15:27/ 0 赞/ 133 阅读

相关 vue-router

文章目录 vue-router 动态路由匹配响应路由参数的变化路由懒加载关于this.$router.p

迷南。/ 2022年12月29日 01:35/ 0 赞/ 178 阅读

相关 vue-router，vue路由简介

（一）命名路由命名路由是目前开发当中使用最频繁的形式通过一个名称 name：属性来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，可以直

女爷i/ 2022年11月04日 01:57/ 0 赞/ 207 阅读

相关 vue-router

vue-router 安装 npm install vue-router --save 使用在src目录下新建一个router.js文件，在router.

快来打我*/ 2022年10月29日 01:49/ 0 赞/ 156 阅读

相关 MySQL Router简介

参考资料：[https://dev.mysql.com/doc/mysql-router/2.0/en/mysql-router-configuration-file-exam

向右看齐/ 2022年07月03日 20:27/ 0 赞/ 132 阅读

相关 vue(四)、vue router.push(),router.replace(),router.go()

1.router.push(location)=====window.history.pushState 想要导航到不同的 URL，则使用 router.push 方法。这

「爱情、让人受尽委屈。」/ 2022年05月14日 16:08/ 0 赞/ 246 阅读

相关 Vue-Router

路由的概念相信⼤部分同学并不陌⽣，它的作⽤就是根据不同的路径映射到不同的视图。我们在⽤ Vue 开发过实际项⽬的时候都会⽤到 Vue-Router 这个官⽅插

本是古典何须时尚/ 2022年05月14日 04:13/ 0 赞/ 211 阅读