Vue Router 相关理解 基本路由 多级路由

news2025/10/31 5:41:13

6.1.相关理解

6.1.1.vue-router 的理解

  • vue的一个插件库，专门用来实现SPA应用

6.1.2.对SPA应用的理解

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

在这里插入图片描述

6.1.3.路由的理解

  1. 什么是路由?
    1. 一个路由就是一组映射关系（key - value）
    2. key为路径，value可能是function或componen
  2. 路由分类
    1. 后端路由
      1. 理解：value是function，用于处理客户端提交的请求
      2. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    2. 前端路由
      1. 理解：value是component，用于展示页面内容
      2. 工作过程：当浏览器的路径改变时，对应的组件就会显示

6.2.基本路由

  1. 安装vue-router，命令npm i vue-router(vue2 安装**npm i vue-router@**3)
  2. 应用插件Vue.use(VueRouter)
  3. 编写router配置项
    import VueRouter from 'vue-router' // 引入VueRouter
import About from '../components/About' // 路由组件
import Home from '../components/Home' // 路由组件

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes:[
    { 
      path:'/about', 
      component:About 
    }, 
    { 
      path:'/home', 
      component:Home 
    }
  ]
})
  4. 实现切换，<router-link></router-link>浏览器会被替换为a标签，active-class可配置高亮样式
    <router-link active-class="active" to="/about">About</router-link>
  5. 指定展示位<router-view></router-view>

在这里插入图片描述

src/router/index.js

该文件专门用于创建整个应用的路由器

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
        }
    ]
})

src/main.js

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

Vue.config.productionTip = false;

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

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

src/App.vue

<template>
    <div>
        <div class="row">
            <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header"><h2>Vue Router Demo</h2></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!-- 原始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标签实现路由的切换 -->
                    <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>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <!-- 指定组件的呈现位置 -->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template> 

<script> 
    export default {
        name:'App',

    }
</script>

src/components/Home.vue

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

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

src/components/About.vue

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

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

6.3.几个注意事项

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
    1. 比如上一节的案例就可以修改为
      1. src/pages/Home.vue
      2. src/pages/About.vue
      3. src/router/index.js
      4. src/components/Banner.vue
      5. src/App.vue
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
  3. 每个组件都有自己的**$route**属性，里面存储着自己的路由信息
  4. 整个应用只有一个router，可以通过组件的**$router**属性获取到
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
        }
    ]
})

<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
            <h2>Vue Router Demo</h2>
        </div>
    </div>
</template>

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

<template>
    <div>
        <div class="row">
            <Banner/>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!-- 原始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标签实现路由的切换 -->
                    <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>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <!-- 指定组件的呈现位置 -->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template> 

<script>
    import Banner from './components/Banner.vue'
    export default {
        name:'App',
        components: {
            Banner
        }
    }
</script>

6.4.多级路由

  1. 配置路由规则，使用children配置项
    import VueRouter from 'vue-router';

// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})
  2. 跳转（要写完整路径）
    <router-link to="/home/news">News</router-link>

在这里插入图片描述


src/pages/Home.vue

<template>
    <div>
        <h2>我是Home的内容</h2>
        <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>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        beforeDestroy() {
            console.log("Home组件即将被销毁了");
        },
        mounted() {
            console.log("Home组件挂载完毕了", this);
        }
    }
</script>

src/pages/News.vue

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

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

src/pages/Message.vue

<template>
    <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>
</template>

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

src/router/index.js

import VueRouter from 'vue-router';

// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children: [
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/690991.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Find My资讯|苹果Find My技术应用于车内丢失设备

Find My资讯|苹果Find My技术应用于车内丢失设备

美国专利商标局正式授予苹果两项泰坦项目新专利&#xff0c;分别是扩展其针对车内丢失设备的“Find My”设备服务&#xff0c;以及用于自动驾驶汽车的高级传感器系统&#xff0c;其中传感器系统还涵盖了带有摄像头系统的车辆&#xff0c;而摄像头系统除可3D重建场景之外&#x…
阅读更多...
通过网络流量监测分析解决堡垒主机部署后未经授权访问的3389端口问题

通过网络流量监测分析解决堡垒主机部署后未经授权访问的3389端口问题

1. 前言 堡垒主机是网络安全的重要组成部分&#xff0c;但在部署后仍可能存在一些主机可以绕过堡垒主机直接访问之前的3389端口。本文将介绍如何利用网络流量监测分析方法解决这个问题&#xff0c;提供一种有效的解决方案&#xff0c;加强对网络的访问控制和安全监测。 2. 网…
阅读更多...
[NOI2016] 网格

[NOI2016] 网格

题目描述 跳蚤国王和蛐蛐国王在玩一个游戏。 他们在一个 &#xfffd;n 行 &#xfffd;m 列的网格上排兵布阵。其中的 &#xfffd;c 个格子中 (0≤&#xfffd;≤&#xfffd;⋅&#xfffd;)(0≤c≤n⋅m)&#xff0c;每个格子有一只蛐蛐&#xff0c;其余的格子中&#xff…
阅读更多...
小红书美妆品牌投放流程有哪些，品牌规划

小红书美妆品牌投放流程有哪些，品牌规划

越来越多的品牌开始重视新媒体&#xff0c;很多品牌和商家纷纷将目光瞄准了小红书&#xff0c;但是由于各平台都有自己的规则&#xff0c;盲目踏入不熟悉的领域肯定是有点冒险的。那么小红书美妆品牌投放流程有哪些&#xff0c;以及品牌规划。 小红书品牌投放指南是指小红书平台…
阅读更多...
享元模式（Flyweight）

享元模式（Flyweight）

别名 缓存&#xff08;Cache&#xff09;。 定义 享元是一种结构型设计模式&#xff0c;它摒弃了在每个对象中保存所有数据的方式 &#xff0c;通过共享多个对象所共有的相同状态&#xff0c;让你能在有限的内存容量中载入更多对象。 前言 1. 问题 假如你希望在长时间工作…
阅读更多...
互联网+洗鞋店软件多门店多网点预约下单小程序

互联网+洗鞋店软件多门店多网点预约下单小程序

互联网洗鞋店软件小程序功能介绍: 1.用户端&#xff08;上门取件、送货到店、寄存网点&#xff09; 2.取货员端&#xff08;取件员拍照&#xff0c;清洗过程&#xff0c;包装拍照&#xff09; 3.多门店管理&#xff08;用户进入小程序&#xff0c;根据定位自动匹配就近门店&…
阅读更多...
Golang每日一练(leetDay0106) 超级丑数、右侧小于当前元素的个数

Golang每日一练(leetDay0106) 超级丑数、右侧小于当前元素的个数

目录 313. 超级丑数 Super Ugly Number &#x1f31f;&#x1f31f; 315. 计算右侧小于当前元素的个数 Count-of-smaller-numbers-after-self &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练…
阅读更多...
easypoi 导出word并插入echart图片和文件

easypoi 导出word并插入echart图片和文件

一 pom 文件引入&#xff1a;<!-- 目前的版本对应 poi 4.1.2 和 xmlbeans 3.1.0 , poi 3.17 和 xmlbeans 2.6.0 --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version&…
阅读更多...
新人必看的Java基础知识点大梳理

新人必看的Java基础知识点大梳理

一个Java程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c;它的状态有&…
阅读更多...
树莓派Pico|SHELL中microPython命令行|pico sdk开发环境搭建|点灯代码|必备开发工具|gcc涉及的include文件目录

树莓派Pico|SHELL中microPython命令行|pico sdk开发环境搭建|点灯代码|必备开发工具|gcc涉及的include文件目录

文章目录 SHELL中microPython命令行SHELL中基于microPython的控制代码Hello Pico 代码SHELL中简单点灯代码SHELL中循环亮灯代码 基于pico sdk开发环境搭建及点灯代码必备开发工具Mingw-w64&#xff1a;著名C/C编译器GCCarm-none-eabi&#xff1a;交叉编译工具Git&#xff1a;开…
阅读更多...
js翻转数组

js翻转数组

arr [red, green, "blue", "pink", "purple"];var arr1 [];for (var i 1; i < arr.length; i) {console.log(arr1.length)arr1[arr1.length] arr[arr.length - i];console.log(arr1.length)}console.log(arr1);
阅读更多...
echarts饼装图自定义图例和扇形区的文字

echarts饼装图自定义图例和扇形区的文字

最近因为工作需要&#xff0c;需要开发一个大屏&#xff0c;后台给的数据是这个的&#xff0c;echarts是默认将数据data例的name属性作为图例和扇形图上展示文本&#xff0c;这里我需要自定义图例信息和内容&#xff0c;通过这篇文章&#xff0c;记录下如何修改这些内容&#x…
阅读更多...
spring IOC详解

spring IOC详解

一、IOC IoC就是Inversion of Control&#xff0c;控制反转。在Java开发中&#xff0c;IoC意味着将你设计好的类交给系统去控制&#xff0c;而不是在你的类内部控制。这称为控制反转。 下面我们以几个例子来说明什么是IoC。假设我们要设计一个Girl和一个Boy类&#xff0c;其中G…
阅读更多...
【PostgreSQL-16新特性之普通用户的保留连接个数（reserved_connections）】

【PostgreSQL-16新特性之普通用户的保留连接个数（reserved_connections）】

PostgreSQL数据库为了保证在高并发&#xff0c;高连接数情况下某些用户能够正常连接到数据库里&#xff0c;设立了几个用户连接的保留个数。 本文介绍了PostgreSQL16版本前为超级用户保留的连接数&#xff08;superuser_reserved_connections&#xff09;以及PostgreSQL16版本…
阅读更多...
【江西省研究生数学建模竞赛】题目之三 植物的多样性 建模方案及参考文献

【江西省研究生数学建模竞赛】题目之三 植物的多样性 建模方案及参考文献

【江西省研究生数学建模竞赛】题目之三 植物的多样性 建模方案及参考文献 1 题目 2023年江西省研究生数模竞赛题目之三 植物的多样性 植物作为食物链中的生产者&#xff0c;通过光合作用吸收二氧化碳&#xff0c;制造氧气&#xff0c;同时为其他生物提供食物和栖息地&#x…
阅读更多...
前端JavaScript入门-day04

前端JavaScript入门-day04

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 函数 为什么需要函数 函数使用 函数的声明语法 函数名命名规范 函数的调用语法 函数体 函数传参 声…
阅读更多...
Scala集合与Java集合的互转函数asScala与asJava

Scala集合与Java集合的互转函数asScala与asJava

只有引入隐式转换类 JavaConverters&#xff0c;才能使用Scala集合与Java集合之间的转换函数。 为方便理解&#xff0c;看下面的例子&#xff1a; import scala.collection.JavaConverters._ val javaList java.util.Arrays.asList("hi", "bye") val sca…
阅读更多...
Restic文件备份工具

Restic文件备份工具

一、Restic介绍 Restic 是一款 GO 语言开发的开源免费且快速、高效和安全的跨平台备份工具。Restic 使用加密技术来保证你的数据安全性和完整性&#xff0c;可以将本地数据加密后传输到指定的存储。Restic 同样支持增量备份&#xff0c;可随时备份和恢复备份。Restic 支持大多数…
阅读更多...
一个自动下载网页图片的python小程序

一个自动下载网页图片的python小程序

文章目录 1.一些杂七杂八的引入2.实现2.1 安装所需python包2.1.1 requests包2.1.1 BeautifulSoup包 3.源码分享4.效果展示 1.一些杂七杂八的引入 最近是端午节&#xff0c;本人碰巧又刚考完试&#xff08;数学砸了&#xff0c;估分115&#xff0c;别的还行&#xff09; 于是……
阅读更多...
Oracle 查询优化改写（第六章）

Oracle 查询优化改写（第六章）

第六章 使用数字 1 常用聚集函数&#xff08;空值处理&#xff09; 2 生成累计和 --公司为了查看用人成本&#xff0c;需要对员工的工资进行累加&#xff0c; --以便查看员工人数与工资支出之间的对应关系。 SELECT Empno,Ename,Sal,SUM(Sal) Over(ORDER BY Empno) AS 成本累…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023