Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图

已于 2023-01-12 14:04:28 修改
阅读量3.2k 收藏 4
点赞数
文章标签： vue.js javascript 前端
于 2023-01-12 11:41:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74343097/article/details/128630441
版权
文章介绍了VueRouter中的动态路由概念，包括如何设置URL参数并接收组件中的参数。同时，对比了全局路由对象$router和当前路由对象$route的用途。通过示例展示了动态路由的实现，以及如何通过查询参数传递额外信息。此外，还讨论了命名路由和命名视图的概念及其应用。
摘要由CSDN通过智能技术生成

一、什么是动态路由

​        将URL地址中可变的内容设置成参数，根据不同的参数渲染不同的组件。（组件可以复用）

二、动态路由如何进行参数的传递

​        1. 如何设置URL地址中的参数：“/url/:参数名”

​        2. 在组件中接收参数：this.$route.params.参数名

三、$router和$route的区别

​        1. $router

​ ​       （1）是VueRouter的实例，是一个全局的路由对象。用户可以在任何地方使用

​​        （2）包含了所有的路由对象（实际代表的路由文件 — 路由表、路由模式），包含了许多关键的对象和属性

​​        （3）用法：在编程式导航中，可以通过$router进行路由跳转（push、replace）

​        2. $route

​ ​        （1）代表当前正在跳转的路由对象，是一个局部对象

​ ​        ​ ​        <router-link to='/login/123>登录</router-Tink>

​ ​        （2）每个路由都有一个$route对象

​ ​        （3）用法：this.$route后面跟name、path、params、query，可以通过$route可以获取对应的name，path，params，query等路由信息

四、示例

​        1. 创建数据文件：assets/books.js

​        2. 创建组件：

​           Books.vue：显示图书列表（显示图书名称）

​ ​          Book.vue：显示图书的详细信息（由路由参数id）

​        3. 创建路由文件：src/router/index.js

​        4. 在main.js文件中注册自定义的路由器

​        5. 在App.vue中通过超链接渲染Books.vue组件

​        6. 修改路由文件：src/router/index.js

​        7. 修改Books.vue中的<router-link>和<router-view>

//1. 创建数据文件：assets/books.js

export default [
    {
        isbn:1001,
        bookName:'西游记',
        bookAuthor:'吴承恩',
        publish:'商务印书馆'
    },
    {
        isbn:1002,
        bookName:'红楼梦',
        bookAuthor:'曹雪芹',
        publish:'商务印书馆'
    },
    {
        isbn:1003,
        bookName:'水浒传',
        bookAuthor:'施耐庵',
        publish:'商务印书馆'
    },
    {
        isbn:1004,
        bookName:'三国演义',
        bookAuthor:'罗贯中',
        publish:'商务印书馆'
    },
]
//2.1 创建组件：Books.vue：显示图书列表（显示图书名称）

<template>
  <div>
    <h2>图书列表</h2>
    <ul>
      <li v-for="(item,index) in bookList" :key="index" style="list-style-type: none">
       <router-link :to="'/books/book/'+item.isbn">{{ item.bookName}}</router-link>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
import books from "@/assets/books";
export default {
  name: "Books",
  data(){
    return {
      bookList:books
    }
  }
}
</script>

<style scoped>

</style>
//2.2 创建组件：Book.vue：显示图书的详细信息（由路由参数id）

<template>
<div>
  <h2>图书详情</h2>
  <p>{{ book.isbn}}</p>
  <p>{{ book.bookName}}</p>
  <p>{{ book.bookAuthor}}</p>
  <p>{{ book.publish}}</p>
</div>
</template>

<script>
import books from '../assets/books'

export default {
  name: "Book",
  data(){
    return {
      book:{}
    }
  },
  created() {//当组件创建时，从books数组中找到对应的图书
    this.book = books.find((item)=>{
      // if(item.isbn == this.$route.params.id){
      //   return item
      // }
      return item.isbn == this.$route.params.id
    })
  },
  //对$route路由对象进行监听，当它发生改变时，更新this.book
  watch:{
    '$route':{
      handler:function (){
        this.book = books.find((item)=>{
          return item.isbn == this.$route.params.id
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
//3. 创建路由文件：src/router/index.js

import Vue,{h} from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/books',
            component:()=> import('../components/Books'),
        }
    ],
    mode:"history"
})
export default router
//4. 在main.js文件中注册自定义的路由器

import Vue from 'vue'
import App from './App.vue'

import router from "@/router";

Vue.config.productionTip = false

new Vue({
  render: function (h) { return h(App) },
  router
}).$mount('#app')
//5. 在App.vue中通过超链接渲染Books.vue组件

<template>
  <div id="app">
    <router-link to="/books">图书信息</router-link>
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
//6. 修改路由文件：src/router/index.js

import Vue,{h} from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/books',
            component:()=> import('../components/Books'),
            children:[
                {
                    path:'/books/book/:id', //动态路由的路径，id是参数名，它是可变的
                    component:()=> import('../components/Book')
                }
            ]
        },
    ],
    mode:"history"
})
export default router

五、路由中的查询参数

​        1. 查询参数的格式：在URL地址中带参数，例如：“/url地址?参数名1=参数值1&参数名2=参数值2”

        2. 在组件中接收查询参数：this.$route.query.参数名

       3. 示例：通过查询参数实现动态路由的效果

​        1. 创建组件：

​           Student.vue：在组件中接收查询参数（由路由参数id）

​        2. 创建路由文件：src/router/index.js

​        3. 在main.js文件中注册自定义的路由器

​        4. 在App.vue中通过超链接渲染Student.vue组件

//1. 创建组件：Student.vue：在组件中接收查询参数（由路由参数id）

<template>
<div>
  <p>学生编号：{{ this.$route.query.sid}}</p>
</div>
</template>

<script>
export default {
  name: "Student"
}
</script>

<style scoped>

</style>
//2. 创建路由文件：src/router/index.js

import Vue,{h} from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/stu',
            component:()=> import('../components/Student')
        }
    ],
    mode:"history"
})
export default router
//3. 在main.js文件中注册自定义的路由器

import Vue from 'vue'
import App from './App.vue'

import router from "@/router";

Vue.config.productionTip = false

new Vue({
  render: function (h) { return h(App) },
  router
}).$mount('#app')
//4. 在App.vue中通过超链接渲染Student.vue组件

<template>
  <div id="app">
    <router-link to="/stu?sid=1001">学生1</router-link>
    &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;
    <router-link to="/stu?sid=aaa">学生2</router-link>
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

六、命名路由

       1. 什么是命名路由?

      ​ 在路由表中给路由项设置name属性

        2. 在 < router-link >中使用name进行映射

        3.示例

//1. 创建组件：Employee.vue：显示员工的详细信息

<template>
  <div>
    <h2>员工信息</h2>
    <p>编号：0x001</p>
    <p>姓名：曹操</p>
    <p>性别：男</p>
  </div>
</template>

<script>
export default {
  name: "Employee"
}
</script>

<style scoped>

</style>
//2. 创建路由文件：src/router/index.js

import Vue,{h} from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
            path:'/employee',
            name:'emp',
            components: { employee:() => import('../components/Employee') }
    ],
    mode:"history"
})
export default router
//3. 在main.js文件中注册自定义的路由器

import Vue from 'vue'
import App from './App.vue'

import router from "@/router";

Vue.config.productionTip = false

new Vue({
  render: function (h) { return h(App) },
  router
}).$mount('#app')
//4. 在App.vue中通过超链接渲染Student.vue组件

<template>
  <div id="app">
    <router-link :to="{ name:'emp'}">员工信息</router-link>
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view name="employee"></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

七、命名视图

        1. 给< router-view >指定名称：在使用时如没有给< router-view >设置名称，默认为default，可以定义多个路由视图，每个路由视图都指定名称

        2. 在路由表中给路由项添加components属性：将组件渲染到给定名称的视图中

鸣鲷有柒
关注
vue动态路由配置及路由传参的方式
08-27
主要介绍了vue动态路由配置，vue路由传参的方式，文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
vue 动态路由传参
abc541817535的博客
06-13 746
// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, 需要对应路由配置如下： { path: '/describe/:id', name: 'Describe', component: D...
$route 和 $router详解和区别
最新发布
wasd2399的博客
08-12 830
$route 是只读的，$router 来编程的
vue中$router和$route的基本使用
Evan's Blog ٩(๑❛ᴗ❛๑)۶
11-26 1万+
发现在自己在前端的道路上要一去不复返了，好了废话少说，开始记录。 如果大家有什么问题，欢迎给我留言，一起交流探讨。: ) 一、路由基本概念 1.route，表示一条路由信息。 { path: '/home', component: Home } 2.routes，表示一组路由信息。 const routes = [ { path: '/home', component: H...
$route和$router的区别
qq_45838276的博客
09-19 7045
2、$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）3、$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。1、$router是用来操作路由，$route是用来获取路由信息。
$route和$router的区别详解
xunfengZ的博客
11-13 1万+
总的来说， $ router是用来操作路由的，$ route是用来获取路由信息的。 1.$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history） 常用的跳转连接的方法： //常规方法 this.$router.push("/login"); //使用对象的形式 不带参数 this.$router.push({ path:"/login" }); //使用对象的形式，参数为地址栏上的参数 this.$router.push({ p
vue-router
热门推荐
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
讲解vue-router之命名路由和命名视图
12-01
前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。 1.首先来说说什么是命名路由？ ① 官方文档的解释...
vue动态路由:路由参数改变,视图不更新问题的解决
10-16
这个问题主要发生在尝试从一个具有动态参数（如`/route/:id`）的路由跳转到另一个具有不同参数的相同路由时，尽管参数已经改变，但视图内容可能保持不变。 **问题描述** 在使用动态路由`/route/:id`时，如果用户在...
详解vue-router 命名路由和命名视图
01-21
说明：vue-router的几个文章中例子是连贯的，因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字，根据名字进行匹配 给不同的router-view定义名字，router-link通过名字进行对应...
vue router总结 $router和$route及router与 router与route区别
12-12
Vue Router 提供了 `router.push()` 方法进行跳转，支持字符串路径、对象路径、命名路由以及带有查询参数的跳转。例如： ```javascript // 字符串路径 router.push('home'); // 对象路径 router.push({ path:...
讲解vue-router之什么是动态路由
12-09
Vue Router 是 Vue.js 应用程序中的官方路由库，它负责管理应用程序的导航和视图。动态路由是 Vue Router 的一个重要特性，它允许我们在路由配置中使用动态路径参数，以便根据不同的参数值加载不同的组件或数据。 ...
$route 和 $router详解、区别、示例代码
精通搬砖，资深技术砖家，在软件开发，人工智能，设备开发等领域都有研究。商业合作&交流学习可私信联系。
07-13 268
router 则是一个完整的 Vue Router 实例，它提供了与导航和路由相关的所有功能。在 Vue.js 中，$route 和 $router 是与路由相关的两个重要概念，它们主要在使用 Vue Router 时发挥作用。$route 是一个只读的属性，用于访问当前激活的路由的状态。通过上述解释和示例代码，你应该能更清楚地理解 $route 和 $router 在 Vue.js 应用中的作用和区别。// 输出当前路由的路径。$router 是一个完整的路由管理器，提供了路由导航和监听的功能。
vue中动态路由传递参数
LLL3189860667的博客
09-07 4561
使用this.$route.query获取传递过来的数据。使用this.$route.变量名获取传递过来的数据。
使用$router
richest_qi的博客
03-10 2374
本篇将了解$router的5个方法，分别是， push replace back forward go 熟悉js的同学可能会觉得上述方法有些眼熟，确实，因为window.history对象上也有类似方法，如back、forward、go。 具体看例子，项目目录如下。 一般组件component/Banner.vue <template> <div class="col-xs-offset-2 col-xs-8"> <div class="pag
router route $router $route 这四者的区别
ll123456789_的博客
12-26 601
router route $router $route 这四者的区别
vue $router和$route的区别
锦年的博客
03-28 5735
vue-router中经常会操作的两个对象route和router两个。 1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1、 $route.path ：字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2、$route.params ：一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 3、$route.quer
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值