Vuejs基本知识(九)【路由】

梦里梦外; 2021-06-26 16:06 570阅读 0赞

路由是所有前端框架中都必须具备的元素。 它定义了对于那个URL（页面），应该由那个文件来处理。

在`Vuejs`中，路由专门独立成为了一个项目: `vue-router`.

## 基本用法 ##

每个`vue`页面,都要对应一个路由. 例如, 我们要做一个"博客列表页", 那么,我们需要两个东西:

1.  `vue`文件,例如: `src/components/books.vue` 负责展示页面
2.  路由代码, 让 `/#/books` 与 上面的`vue`文件对应.

下面的代码就是一个完整的路由文件:

import Vue from 'vue'
    import Router from 'vue-router'
    
    // 增加这一行, 作用是引入 SayHi 这个component
    import SayHi from '@/components/SayHi'
    
    Vue.use(Router)
    export default new Router({ 
      routes: [
    
        // 增加下面几行, 表示定义了 /#/say_hi 这个url
        { 
          path: '/say_hi',
          name: 'SayHi',
          component: SayHi
        },
      ]
    })

写法是固定的. 其中的:

*  `path`: 定义了 链接地址, 例如: `/#/say_hi`
 *  `name`: 为这个路由加个名字, 方便以后引用,例如: `this.$router.push({name: 'SayHi'})`
 *  `component`: 该路由由哪个`component`来处理.

## 跳转到某个路由时,带上参数 ##

有路由，就会有参数，我们看一下路由是如何处理参数的。

### 1. 对于普通的参数 ###

例如:

routes: [
      { 
        path: '/blog',
        name: 'Blog'
      },
    ]

在视图中, 我们这样做:

<router-link :to="{name: 'Blog', query:{id: 3} }">User</router-link>

当用户点击这个代码生成的 html 页面时，就会触发跳转。

在`<script/>`中,也可以这样做:

this.$router.push({ name: 'Blog', query: { id: 3}})

都会跳转到: `/#/blog?id=3` 这个url.

### 对于在路由中声明的参数 ###

例如:

routes: [
      { 
        path: '/blog/:id',
        name: 'Blog'
      },
    ]

在视图中, 我们这样做:

<router-link :to="{name: 'Blog', params: {id: 3} }">User</router-link>

在`script`中,也可以这样做:

this.$router.push({ name: 'Blog', params: { id: 3}})

都会跳转到: `/#/blog/3` 这个url.

## 根据路由获取参数 ##

`Vue`的路由中,参数获取有两种方式: `query` 和 `params`

### 获取普通参数 ###

对于 `/#/blogs?id=3` 中的参数,这样获取:

this.$route.query.id  // 返回结果3

### 获取路由中定义好的参数 ###

对于 `/#/blogs/3` 这样的参数, 对应的路由应该是:

routes: [
        { 
          path: '/blogs/:id',  // 注意这里的 :id
          ...
        },
      ]

这个 `named path`, 就可以通过下面代码来获取`id`:

this.$route.params.id  // 返回结果3

发表评论取消回复

表情：

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

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

相关阅读

相关 vuejs路由传参方法

常用的： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.p

本是古典何须时尚/ 2023年01月17日 08:47/ 0 赞/ 240 阅读

相关单臂路由基本知识整理

单臂路由基本知识整理单臂路由的概述单臂路由的优缺点单臂路由的配置单臂路由的概述单臂路由（router-on-a-stic

蔚落/ 2022年11月27日 00:46/ 0 赞/ 269 阅读

相关路由子系统——基本概念与高级路由

本文讨论IPv4的路由子系统。（IPv6对路由的处理不同）。基本概念关于路由子系统路由子系统工作在三层，用来转发入口流量。路由子系统主要涉及路由器、

矫情吗；*/ 2022年08月05日 07:37/ 0 赞/ 282 阅读

相关 vuejs的路由功能

最简单的路由 1，原理：通过控制父组件一个路由变量的值，来动态改变指向的组件; 而被指向的组件又通过渲染方法被渲染到父组件中，因此当指向组件改变时，被

港控/mmm°/ 2022年05月24日 04:53/ 0 赞/ 249 阅读

相关基本路由和静态路由配置

R1(config)\ erase startup-config .在特权模式下使用 erase startup-config命令清除配置 R1(con

怼烎@/ 2022年02月20日 02:47/ 0 赞/ 527 阅读

相关 Vuejs基本知识(一)【项目文件夹基本结构】

Webpack下的Vuejs项目文件结构根据前面章节，我们安装了 `webpack, vue-cli`, 并运行成功，看到了Vuejs的第一个页面。那么首先，我们需

灰太狼/ 2021年06月26日 16:06/ 0 赞/ 660 阅读

相关 Vuejs基本知识(九)【路由】

路由是所有前端框架中都必须具备的元素。它定义了对于那个URL（页面），应该由那个文件来处理。在`Vuejs`中，路由专门独立成为了一个项目: `vue-router`.

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 571 阅读

相关 Vuejs基本知识(十)【使用样式】

样式用起来特别简单. 直接写到 `<style>` 段落里面即可. 如下代码所示： <template> <div class='hi'>

墨蓝/ 2021年06月26日 16:06/ 0 赞/ 541 阅读

相关 Vuejs基本知识(十四)【component初级知识】

`Component` 组件组件是 Vuejs中最最重要的部分之一. 学号需要一定的时间投入。在 “webpack” 项目中，每一个页面文件( `.vue`) 都可

朴灿烈づ我的快乐病毒、/ 2021年06月26日 16:06/ 0 赞/ 588 阅读

相关 Vuejs进阶知识(十九)【slot】

作为对`Component`的补充，Vuejs 增加了 `Slot` 这个功能. 普通的`Slot` 我们从具体的例子来说明。 <html> <hea

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 544 阅读