十二：路由基本使用，嵌套路由，query参数，命名路由，params参数，路由props配置，router-link的replace属性

最新推荐文章于 2024-07-31 11:41:46 发布

wwnewnewnew

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量166

点赞数 1

分类专栏： Vue.js 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_45994446/article/details/133757725

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.路由简介

1.1.什么是路由

key+value=路由，路由就是一组key与value的对应关系；一个路由器（router）管理多个路由；

vue-router是vue一个插件库，专门用来实现SPA应用；

1.2.路由分类

（1）前端路由

1、key是路径，value是组件component，用于展示页面内容。
2、工作过程：当浏览器的路径改变时, 对应的组件就会显示。

（2）后端路由

1、key是路径，value 是 function, 用于处理客户端提交的请求。(node.js)
2、工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

1.3.对SPA应用的理解

1、单页 Web 应用（single page web application，SPA）。
2、整个应用只有一个完整的页面 index.html。
3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4、数据需要通过 ajax 请求获取。

二.路由基本使用

首先需要安装vue-router：

Vue2安装vue-router，命令：npm i vue-router@3
Vue3安装vue-router，命令：npm i vue-router

2.1.创建组件

创建About组件和home组件：

About.vue：

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
  name: "About",
};
</script>

<style>
</style>

Home.vue:

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>

2.2创建路由器

创建router/index.js:配置项里的routes指代路由器管理的一个个路由route；

// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴漏路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
    ]
})

2.3引入使用路由器

在main.js内引入并使用路由器插件：


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

// 引入路由VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'

Vue.config.productionTip = false

// 使用VueRouter插件
Vue.use(VueRouter)

new Vue({
    el: '#app',
    render: h => h(App),
    router: router
})

2.4使用路由插件实现路由切换：

使用<router-link></router-link>标签实现路由的切换，to=“/xxx”是在网址栏展示的路径， active-class是当你点击这个的时候可展示的效果（高亮样式）

 <!-- 原始html使用a标签实现页面跳转 -->
 <!-- <a class="list-group-item active" href="./about.html">About</a> -->
 <!-- <a class="list-group-item" href="./home.html">Home</a> -->

  <!-- Vue中借助router-link标签实现路由切换 -->
  <!-- active-class="active"表示元素被激活时的样式 -->
 <router-link class="list-group-item" active-class="active" to="about">About</router-link>
 <router-link class="list-group-item" active-class="active" to="home" >Home</router-link>

2.5指定组件呈现

在App中使组件内容在页面呈现：

 <!-- 指定组件呈现位置 -->
            <router-view></router-view>

2.6路由使用注意点

1.路由组件通常存放在src/pages文件夹，一般组件通常存放在src/components文件夹。一般组件就按我们之前用法那么用，路由组件的话就是靠<router-link></router-link>标签关联上index.js里配置的路由规则，然后由<router-view></router-view>放到指定位置。

2、通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。所以切换的时候，路由组件一直是其他的销毁-当前的挂载 => 其他的销毁-当前的挂载 =>. … …

3、每个组件都有自己的$route属性，里面存储着自己的路由信息。
4、每个组件都有一个共同的路由器router，可以通过组件的$router属性获取到

三.嵌套（多级）路由

3.1.创建News和Message组件

News.vue:

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
  name: "News",
};
</script>

Message.vue:

<template>
  <div>
    <ul>
      <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
      <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
      <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Message",
};
</script>

3.2创建子路由

子路由通过children创建，注意：二级路由不加斜杠。同时引入Message与Home

......
import News from "../pages/News"
import Message from "../pages/Message"
// 创建并暴漏路由器
export default new VueRouter({

    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 子路由，[]表示是因为可能有n多个子路由
            children: [
                {
                    path: 'news',  //二级路由不加斜杠......
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
    ]

3.3路由跳转使用

由于是嵌套在Home组件内，所以需要在Home.vue中使用 <router-link>实现路由跳转，并由 <router-view>展示

  <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/news"  //此处要写完整路径，加上/
            >News</router-link>
        </li>
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/message"
            >Message</router-link>
        </li>
      </ul>
      <!-- 点到谁路由器检测到展示谁 -->
      <router-view></router-view>

四.路由query参数

实现消息具体信息展示可以使用query传参，query参数是在组件的$route内的配置信息，可以用来接收传递数据，类似的还有params参数

`4.1添加Detail组件`

添加detail组件展示具体数据：

<template>
  <ul>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>
  </ul>
</template>

<script>
export default {
  name: "Detail",
  mounted() {
    //  得到组件相关配置信息 query
    console.log(this.$route);
  },
};
</script>

4.2配置三级路由

首先在index.js里的home里的message配置三级路由

  routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 子路由，[]表示是因为可能有n多个子路由
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail', //三级路由
                            component: Detail,
                        }
                    ]

                }
            ]
        },
    ]

4.3路由跳转传参

路由跳转传参两种方法：

（1）跳转路由携带query参数，to的字符串写法；

:to中使用字符串拼接（反引号）或者模板字符串，直接写在要转到的路由路径后面，使用?连接，&拼接

（2）跳转路由携带query参数，to的对象写法 (推荐)

:to中使用对象的形式传参

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
        {{m.title}}</router-link> -->

        <!-- 跳转路由携带query参数，to的对象写法 -->
        <router-link :to="{
            path: '/home/message/detail',
            query: { id: m.id,title: m.title,},
          }">
            {{ m.title }}</router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

4.4组件接收数据

目标组件的$route接收数据传来的query，所以通过$route.query.id和$route.query.title可以接收数据

    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>

五.命名路由

作用：简化路由跳转

如何使用：

首先name给路由命名：在index路由配置中以name给路由命名：

使用：将传统to:"/about"改为 :to="{ name: 'guanyu' }"

 <router-link
            class="list-group-item"
            active-class="active"
            :to="{ name: 'guanyu' }"
            >About</router-link>

注意：使用路由跳转传参时的字符串法时没法用这个命名法

六.路由params参数

由图可知，$router内是也有params，所以也可以通过params传递参数

6.1params传参

方法（1）：to的字符串写法

  <!-- 跳转路由携带params参数，to的字符串写法 -->
       <router-link :to="`/home/message/detail/${m.id}/${m.title}`">
          {{ m.title }}</router-link>

方法（2）：to的对象写法

注意：使用params传参时不能使用path路径，必须使用name配置

 <!-- 使用params参数不能使用path: '/home/message/detail', 必须使用name配置--> 
<router-link
          :to="{ 
            name: 'xiangqin',
            params: { id: m.id, title: m.title},
          }">
          {{ m.title }}</router-link>

6.2声明占位符

注意：占位符的名字要和传的params参数的属性名一致，否则url会不显示

   children: [
                        {
                            name: 'xiangqin',
                            // 使用占位符表示使用params传参
                            path: 'detail/:id/:title',
                            component: Detail,
                        }
                    ]

6.3接收参数

在组件内接收参数：

<ul>
    <li>消息编号：{{ $route.params.id }}</li>
    <li>消息标题：{{ $route.params.title }}</li>
  </ul>

七.路由的props配置

当传递参数过多时，接收参数时得写很多相同内容，此时不太方便，显得臃肿

组件的props配置用来接收外部传入的数据；

路由的props配置让路由组件更方便接收参数，不用写$route.query/params.id这种比较长的

7.1第一种写法

值为对象，该对象中所有key-value均以props形式传递给Detail组件

该方法传递的固定的数据，不推荐

    // props第一种写法：值为对象，该对象中所有key-value均以props形式传递给Detail组件
  //    传递的死数据，用的少
        props: { a: 1, b: 'hello' }

组件接收数据：

<li>a:{{ a }}</li>
 <li>b:{{ b }}</li>
，，，，，，
 props: ["a", "b"],

7.2第二种写法

值为布尔值,若布尔值为真，则会把该路由组件收到的所有params参数以props的形式传递

该方法只适合与 params传参，不适用于query传参；此时message组件向detail组件传递信息不能使用query传参

// props第2种写法：值为布尔值,若布尔值为真，则会把该路由组件收到的所有params参数以props的形式传递给Detail组件
    props: true

7.3第三种写法

props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件，这个是最常用的，函数会收到参数，这个参数就是组件身上的$route，我们可以通过它来获取query或者params里面的东西，然后传过去

 // props第3种写法:值为函数，该函数返回的key-value均以props形式传递给Detail组件
     props($route) {
            return { id: $route.query.id, title: $route.query.title }
            、  } */
     // 第三种解构赋值写法
        props({ query }) {
              return { id: query.id, title: query.title }
        }

接收数据

  props: ["id", "title"],

八.router-link的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

如何开启replace模式：<router-link replace .......>News</router-link>

 //全写
<router-link
            :replace="true"
            class="list-group-item"
            active-class="active"
            :to="{ name: 'guanyu' }"
            >About</router-link
          >
//简写
          <router-link
            replace
            class="list-group-item"
            active-class="active"
            to="/home"
            >Home</router-link
          >

使用push可以跳转回去，而使用replace会直接替换销毁第一个

wwnewnewnew

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十二：路由基本使用，嵌套路由，query参数，命名路由，params参数，路由props配置，router-link的replace属性

key+value=路由，路由就是一组key与value的对应关系；一个路由器（router）管理多个路由；vue-router是vue一个插件库，专门用来实现SPA应用；
复制链接

扫一扫

专栏目录