Vue Router相关理解

news2024/11/26 10:16:39

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

SPA应用的理解

单页Web应用（single page web application,SPA）

整个应用只有一个完整的页面

点击页面中的导航链接不会刷新页面，只会做页面的局部刷新

数据需要通过ajax请求获取

路由理解

基本路由

安装vue-router，命令npm i vue-router@3 （后面加@3原因是我使用的是vue2）

应用插件Vue.use(VueRouter)

编写router配置项src/router/index.js

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

//暴露router
export default router

实现切换<router-link></router-link>浏览器会被替换为a标签 active-class可配置高亮样式

<router-link active-class="active" to="/about">About</router-link>

指示展示位<router-view></router-view> 

案例

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)
//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    router:router
})

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/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">
                    <!-- <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 class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <!-- 指定组件呈现的位置 -->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

src/components/About.vue

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

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

src/components/Home.vue

<template>
    <h2>我是Home的内容</h2>
  </template>
  
  <script>
  export default {
    name: 'Home',
  }
  </script>

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

注意事项

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/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">
                    <!-- <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 class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <!-- 指定组件呈现的位置 -->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

多级路由

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',
}
</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="/message3">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/764691.html

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

相关文章

QT中QTimer的循环时间小于槽函数执行时间时的状况分析

QT中QTimer的循环时间小于槽函数执行时间时的状况分析

目录 QTimer运行程序在控制台中实现&#xff1a; 当循环间隔时间大于槽函数时间时&#xff1a; 当存在两个定时器器&#xff0c;其中一个还是间隔100ms&#xff0c;另一个间隔1000ms&#xff1a; 当两个定时器的循环周期大于槽函数执行时间时 QTimer运行程序在控制台中实…
阅读更多...
工作笔记20230717

工作笔记20230717

1、C#中winform页面增加切换页面 2、单独定义struct的时候要用变量赋值 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Runtime.InteropServices; using System.Runtime.Serialization; using System.Text; usi…
阅读更多...
xml.etree.ElementTree

xml.etree.ElementTree

python使用 xml.etree.ElementTree包的时候&#xff0c;对xml中的空标签进行了简写&#xff0c;想恢复成正常模式怎么弄
阅读更多...
如何实现服务器对外开放？路由器端口映射怎么设置？

如何实现服务器对外开放？路由器端口映射怎么设置？

使用路由器后&#xff0c;Internet用户无法访问到局域网内的主机&#xff0c;因此不能访问内网搭建的Web、FTP、Mail等服务器。路由器端口映射功能可以实现将内网的服务器映射到Internet&#xff0c;从而实现服务器对外开放。路由器端口映射怎么设置&#xff1f;下面给大家介绍…
阅读更多...
代码随想录算法训练营第二十天 | 动态规划系列9,10,11,12

代码随想录算法训练营第二十天 | 动态规划系列9,10,11,12

动态规划系列9,10,11,12 300 最长递增子序列未看解答自己编写的青春版重点代码随想录的代码我的代码(当天晚上理解后自己编写) 674 最长连续递增序列未看解答自己编写的青春版重点代码随想录的代码我的代码(当天晚上理解后自己编写) 718 最长重复子数组未看解答自己编写的青春版…
阅读更多...
ETHERNET/IP转TCP/IP网关tcp/ip协议包含哪几层

ETHERNET/IP转TCP/IP网关tcp/ip协议包含哪几层

大家好&#xff0c;今天我们将带大家了解一款自主研发的通讯网关&#xff0c;远创智控YC-EIP-TCP/IP。这是一个强大的工具&#xff0c;能帮助我们将ETHERNET/IP网络和TCP/IP网络连接在一起&#xff0c;让我们更好地管理和监控网络。 1, 首先&#xff0c;让我们来看看这款网关…
阅读更多...
时序数据库 TDengine 流式计算在吉科软冷链系统中的应用实践

时序数据库 TDengine 流式计算在吉科软冷链系统中的应用实践

当下&#xff0c;随着物流供应链的不断发展&#xff0c;冷链物流正变得越来越重要。通过数字化、平台化和生态化的智慧冷链监管平台&#xff0c;企业可以更好地掌握运输车辆的位置&#xff0c;及时发现并处理异常事件&#xff0c;有效提升客户满意度和信任度&#xff0c;同时也…
阅读更多...
轻松构建业务应用程序，提高效率和准确性

轻松构建业务应用程序，提高效率和准确性

在数字化时代&#xff0c;企业和组织面临着不断增长的业务需求和快速变化的市场环境。为了适应这一挑战&#xff0c;越来越多的企业开始寻找一种能够快速开发应用程序、提高效率并降低成本的解决方案。在众多的选项中&#xff0c;我们聊一聊中小企业可选择的低代码平台。 一、简…
阅读更多...
idea创建spark教程

idea创建spark教程

1、环境准备 java -version scala -version mvn -version spark -version 2、创建spark项目 创建spark项目&#xff0c;有两种方式&#xff1b;一种是本地搭建hadoop和spark环境&#xff0c;另一种是下载maven依赖&#xff1b;最后在idea中进行配置&#xff0c;下面分别记录两…
阅读更多...
2024考研408-操作系统 第四章-文件管理 学习笔记

2024考研408-操作系统 第四章-文件管理 学习笔记

文章目录 一、文件系统基础1.1、初识文件管理1.1.文件的属性1.1.2、文件内部的数据应该怎样组织起来&#xff08;无结构与有结构&#xff09;1.1.3、文件之间应该怎样组织起来&#xff1f;1.1.4、操作系统应该向上提供哪些功能&#xff1f;1.1.5、从上往下看&#xff0c;文件应…
阅读更多...
【监控系统】Promethus监控SpringBoot微服务应用配置实战

【监控系统】Promethus监控SpringBoot微服务应用配置实战

我们本节要实现的是Java服务级监控用于对每个应用占用的内存、线程池的线程数量、restful调用数量和响应时间、JVM状态、GC信息等进行监控&#xff0c;并可将指标信息同步至Prometheus中集中展示和报警。 首先我们先了解下什么是actuator&#xff1f; Spring Boot Actuator 模…
阅读更多...
从头开始：自定义类型入门指南（结构体、位段、枚举、联合）

从头开始：自定义类型入门指南（结构体、位段、枚举、联合）

目录 文章目录 前言 结构体 结构体类型的声明 结构体的自引用 结构体变量的定义和初始化 结构体变量定义 初始化 结构体大小 结构体传参 位段 什么是位段 枚举 枚举的定义 枚举的优点 枚举的使用 联合&#xff08;共用体&#xff09; 联合类型的定义 联合大小的计算 总结 前…
阅读更多...
基于Nginx的web集群项目

基于Nginx的web集群项目

目录 nginx介绍代理集群 安装配置文件http 使用master和worker升级问题 基于域名的虚拟主机隐藏nginx的版本信息供别人下载的网站统计的信息的页面pv介绍 ngixn续nginx认证nginx的allow和denynginx限制并发数nginx限速限速的算法 nginx 限制请求数nginx 的 locationnginx 的 lo…
阅读更多...
代码随想录算法训练营day4 | 24. 两两交换链表中的节点，19. 删除链表的倒数第 N 个结点，面试题 02.07. 链表相交，142. 环形链表 II

代码随想录算法训练营day4 | 24. 两两交换链表中的节点，19. 删除链表的倒数第 N 个结点，面试题 02.07. 链表相交，142. 环形链表 II

目录 24. 两两交换链表中的节点 19. 删除链表的倒数第 N 个结点 面试题 02.07. 链表相交 142. 环形链表 II 24. 两两交换链表中的节点 24. 两两交换链表中的节点 难度&#xff1a;medium 类型&#xff1a;链表 思路&#xff1a; 代码&#xff1a; class Solution {pub…
阅读更多...
【目标检测】ROI Polling和ROI Align

【目标检测】ROI Polling和ROI Align

ROI Pooling和ROI Align都是为了解决目标检测RPN任务后得到的一系列proposals大小不一致的问题。 ✨ 1 基本思想 &#x1f30a; 1.1 ROI Pooling 假设有一张特征图大小为8x8(原图大小sxs)&#xff0c;一个bbox坐标(0, 3, 7, 8)&#xff0c;我们目标是获得大小为2x2的特征图作…
阅读更多...
PostgreSQL 考试认证指南：考前准备和考试概述

PostgreSQL 考试认证指南：考前准备和考试概述

下面是关于考前准备和考试概述的指南&#xff1a; 考前准备&#xff1a; 1.确定考试内容&#xff1a;详细了解考试的内容范围和考试要求。可以查阅PostgreSQL官方网站或认证考试指南&#xff0c;以获取相关信息。 2.学习和实践&#xff1a;系统地学习和掌握与PostgreSQL相关…
阅读更多...
Animboat Application Framework

Animboat Application Framework

SpringBoot的服务将部署在云端 管理云端数据和处理分布式的业务请求 本地基础服务将作为云端和终端中间媒介&#xff0c; 与局域网内其它dcc 插件或者app运行实例进行通信&#xff0c; 同时本地基础服务将负责本地数据的管理。 每个AppInstance都会有自己的FlaskSvr用于与Loc…
阅读更多...
前端学习记录~2023.7.16~CSS杂记 Day8

前端学习记录~2023.7.16~CSS杂记 Day8

前言一、正常布局流二、弹性盒子1、为什么是弹性盒子2、指定元素的布局为flexible3、flex 模型说明4、列还是行&#xff1f;5、换行6、flex-flow 缩写7、flex 项的动态尺寸8、flex&#xff1a;缩写与全写9、水平和垂直对齐&#xff08;1&#xff09;align-items 属性&#xff0…
阅读更多...
[极客大挑战 2019]PHP（反序列化）

[极客大挑战 2019]PHP（反序列化）

介绍说明&#xff0c;有备份的习惯&#xff0c;找常见的备份文件后缀名 使用dirsearch进行扫描 dirsearch -u http://f64378a5-a3e0-4dbb-83a3-990bb9e19901.node4.buuoj.cn:81/ -e php-e 指定网站语言 扫描出现&#xff0c;www.zip文件 查看index.php <?php include c…
阅读更多...
C\C++ 使用socket判断ip是否能连通

C\C++ 使用socket判断ip是否能连通

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan 简介&#xff1a; 使用socket判断ip是否能联通 效果&#xff1a; 代码&#xff1a; #include <iostream> #include <cstdlib> #include <cstdio> #include &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023