Vue之Vue Router要点梳理

hwJw19 发表于 2021/06/30 17:22:32 2021/06/30
【摘要】 Vue Router 是 Vue.js (opens new window) 官方的路由管理器。主要应用于构建单页面应用。本文不会详细介绍各种概念,主要是梳理Vue Router在使用中的知识要点,满满的干货哦~附Vue Router思维导图一张:一、Vue Router安装对于vue全家桶的项目,不需要再安装Vue Router,如果项目里没有集成Vue Router,可以使用以下命令,在...

Vue Router Vue.js (opens new window) 官方的路由管理器。主要应用于构建单页面应用。

本文不会详细介绍各种概念,主要是梳理Vue Router在使用中的知识要点,满满的干货哦~

Vue Router思维导图一张:

一、Vue Router安装

对于vue全家桶的项目,不需要再安装Vue Router,如果项目里没有集成Vue Router,可以使用以下命令,在项目目录里安装即可:

npm install vue-router --save

此处附官方文档地址:https://router.vuejs.org/zh/,可方便查阅。

二、使用路由三步曲

1.注册路由器: main.js

import router from './router'
new Vue({
      router
})

2.创建路由器

new VueRouter({
            routes: [
              { // 一般路由
                path: '/about',
                component: about
              },
              { // 自动跳转路由
                path: '/', 
                redirect: '/about'
              }
            ]
})

3.使用路由组件标签

<router-link to="/xxx">Go to XXX</router-link>
<router-view></router-view>

三、嵌套路由

children: [
            {
              path: '/home/news',
              component: news
            },
            {
              path: 'message',
              component: message
            }
]

四、向路由组件传递数据

(一)、params方式

方案一:

传递方式

<router-link to="/Test/123">routerlink传参</router-link>
<router-view/>

路由配置

{
      path: '/Test/:num',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.num

页面地址:http://localhost:8083/#/Test/123

特点:刷新页面仍然能获取

方案二:

传递方式

<button @click="deliverParams(123)">push传参</button>
<router-view/>
methods: {
      deliverParams(id) {
        this.$router.push({
          path: `/Test/${id}`
        })
      }
}

路由配置

{
      path: '/Test/:id',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.id

页面地址:http://localhost:8083/#/Test/123

特点:刷新页面仍然能获取

方案三:

传递方式

<button @click="deliverParams(123)">push传参</button>
    <router-view />
methods: {
      deliverParams(id) {
        this.$router.push({
          name: 'Test',
          params: {
            id: id
          }
        })
      }
}

路由配置

{
      path: '/Test/:id',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.id

页面地址:http://localhost:8083/#/Test/123

特点:刷新页面仍然能获取

方案四:

传递方式

<button @click="deliverParams(123)">push传参</button>
    <router-view />
methods: {
      deliverParams(id) {
        this.$router.push({
          name: 'Test',
          params: {
            id: id
          }
        })
      }
}

路由配置

{
      path: '/Test',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.id

页面地址:http://localhost:8083/#/Test

特点:刷新页面获取不到

(二)、props方式

传递方式

<router-link to="/">hello</router-link>
<router-view msg='abc'/>

获取

props: { // 声明接受数据
      msg: String
    },
mounted() {
      console.log(this.msg);
    },

页面地址:http://localhost:8083/#/Test

特点:刷新页面仍然能获取

(三)、query方式

方案一

传递方式

<router-link to="/Test?zzz=123&yyy=000">test</router-link>
<router-view/>

获取

this.$route.query

页面地址:http://localhost:8083/#/Test?zzz=123&yyy=000

特点:刷新页面仍然能获取

方案二:

传递方式

<button @click="deliverQuery(123)">push传参</button>
    <router-view />

获取

this.$route.query.id

页面地址:http://localhost:8083/#/Test?id=123

特点:刷新页面仍然能获取

五、缓存路由组件

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。具体使用方式如下:

<keep-alive>
          <router-view></router-view>
</keep-alive>

六、路由的编程式导航

1.this.$router.push(path)

相当于点击路由链接(可以返回到当前路由界面)

2.this.$router.replace(path)

用新路由替换当前路由(不可以返回到当前路由界面)

3.this.$router.back()

请求(返回)上一个记录路由

以上是我整理的vue-router使用的相关知识点,其中路由传参的各种方式,如何使用,如何获取参数,各个方式直接的特点,都有列出哦~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。