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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2023.6.27宝塔面板无法正常进入

2023.6.27宝塔面板无法正常进入

解决访问宝塔面板提示404 Not Found 情况说明&#xff1a;访问宝塔面板提示404&#xff0c;或者忘记外网面板地址 大概率访问路径不够全 输入以下内容查看 /etc/init.d/bt default 如果还是不行再重启宝塔面板&#xff0c;执行上面步骤 /etc/init.d/bt stop /etc/init.d/b…
阅读更多...
初识mysql数据库之mysql数据库安装（centos）

初识mysql数据库之mysql数据库安装（centos）

目录 一、卸载不需要的环境 二、安装mysql yum源 三、安装mysql 四、登录mysql 1. 直接登录 2. 设置免密码登录 五、配置my.cnf 六、mysql登录时的一些选项介绍 一、卸载不需要的环境 要注意&#xff0c;在安装mysql数据库时&#xff0c;最好将用户切换为root&#xf…
阅读更多...
git介绍和安装/git,github，gitee，gitlab区别/git使用流程/ git常用命令/git忽略文件

git介绍和安装/git,github，gitee，gitlab区别/git使用流程/ git常用命令/git忽略文件

git介绍和安装 # 版本管理软件-1 对代码版本进行管理---》首页功能完成---》课程功能完成---》可以回退到某个版本-2 协同开发--》多人开发--》合并代码---》可能会有冲突&#xff0c;解决冲突# 版本管理软件&#xff1a;主流就两个-git&#xff1a;现在用的最多&#xff08;学…
阅读更多...
IMX6ULL系统移植篇-镜像烧写方法

IMX6ULL系统移植篇-镜像烧写方法

一. 烧录镜像简介 本文我们就来学习&#xff1a;windows 系统下烧录镜像的方法。 如何使用 NXP 官方提供的 MfgTool 工具通过 USB OTG 口来 烧写系统。 二. windows下烧录镜像 1. 烧录镜像前准备工作 &#xff08;1&#xff09;从开发板上拔下 SD卡。 &#xff08;2…
阅读更多...
fatal error: ‘type_traits‘ file not found错误解决

fatal error: ‘type_traits‘ file not found错误解决

错误如下 In file included from ../test_opencv_qt/main.cpp:1: In file included from ../../Qt/6.5.1/android_x86_64/include/QtGui/QGuiApplication:1: In file included from ../../Qt/6.5.1/android_x86_64/include/QtGui/qguiapplication.h:7: In file included from .…
阅读更多...
springDatajpa动态sql根据时间范围将数据导出为excel并使用vue的按钮去触发

springDatajpa动态sql根据时间范围将数据导出为excel并使用vue的按钮去触发

用到的技术点&#xff1a; 1.springDatajpa 2.EasyExcel 3.数据库 4.vue 前端实现&#xff1a; 1.创建按钮&#xff08;点击此按钮弹出填写导出条件的弹出框&#xff09; <el-button type"primary" round click"dialogVisible true"><svg-icon …
阅读更多...
什么是Session

什么是Session

1、web中什么是会话 &#xff1f; 用户开一个浏览器&#xff0c;点击多个超链接&#xff0c;访问服务器多个web资源&#xff0c;然后关闭浏览器&#xff0c;整个过程称之为一个会话。 2、什么是Session &#xff1f; Session:在计算机中&#xff0c;尤其是在网络应用中&…
阅读更多...
MySQL数据同步到ES的4种解决方案

MySQL数据同步到ES的4种解决方案

一、背景 大家应该都在各种电商网站检索过商品&#xff0c;检索商品一般都是通过什么实现呢&#xff1f;搜索引擎Elasticsearch。那么问题来了&#xff0c;商品上架&#xff0c;数据一般写入到MySQL的数据库中&#xff0c;那么用于检索的数据又是怎么同步到Elasticsearch的呢&…
阅读更多...
分布式定时任务框架 PowerJob

分布式定时任务框架 PowerJob

业务背景 1.1 为什么需要使用定时任务调度 &#xff08;1&#xff09;时间驱动处理场景&#xff1a;整点发送优惠券&#xff0c;每天更新收益&#xff0c;每天刷新标签数据和人群数据。 &#xff08;2&#xff09;批量处理数据&#xff1a;按月批量统计报表数据&#xff0c;批…
阅读更多...
使用nodejs操作postgresql

使用nodejs操作postgresql

环境准备 1 navicat premium 2 postgresql 14 装完上述软件后&#xff0c;远程连接上之后如下&#xff1a; 自己建立一个用户表users,然后随机生成一些数据即可 步骤 这里我将项目放到了gticode里&#xff0c;可以下载下来使用 https://gitcode.net/wangbiao9292/nodejs-p…
阅读更多...
数据技术在金融行业有哪些应用_光点科技

数据技术在金融行业有哪些应用_光点科技

随着信息技术的迅猛发展&#xff0c;大数据技术逐渐成为金融行业的重要工具。大数据技术的应用&#xff0c;不仅可以提高金融机构的运营效率&#xff0c;还能够提供更准确的风险评估和预测&#xff0c;从而为投资者和决策者提供更好的决策依据。 那么&#xff0c;大数据技术在…
阅读更多...
Keil MDK编程环境下的 STM32 IAP下载（学习笔记）

Keil MDK编程环境下的 STM32 IAP下载（学习笔记）

IAP的引入 不同的程序下载方式 ICP ICP(In Circuit Programing)。在电路编程&#xff0c;可通过 CPU 的 Debug Access Port 烧录代码&#xff0c;比如 ARM Cortex 的 Debug Interface 主要是 SWD(Serial Wire Debug) 或 JTAG(Joint Test Action Group)&#xff1b; ISP ISP(I…
阅读更多...
【VUE】ElementUI实现表格拖拽功能及行大图预览

【VUE】ElementUI实现表格拖拽功能及行大图预览

一. 背景 elementui没自带的拖拽排序功能&#xff0c;所以需要借助第三方插件sortablejs 二. 步骤 安装 npm install sortablejs --save 引入 import Sortable from ‘sortablejs’ template文件应用 row-key填写唯一标识 id"dragTable"是为了通过document找到…
阅读更多...
C++——命名空间（namespace）

C++——命名空间（namespace）

目录 1. C语言命名冲突 2. 命名空间定义 3. 命名空间使用 可能大家在看别人写的C代码中&#xff0c;在一开始会包这个头文件&#xff1a;#include<iostream> 这个头文件等价于我们在C语言学习到的#include<stdio.h>&#xff0c;它是用来跟我们的控制台输入和输出…
阅读更多...
利用Django路由项的别名(name)对路由进行反向解析

利用Django路由项的别名(name)对路由进行反向解析

在Django的函数path()中&#xff0c;可以给一条路由进行命名&#xff0c;然后在视图函数或模板HTML文件中进行调用&#xff0c;这样的好处是&#xff1a;只要路由的name不变&#xff0c;那么修改了URL具体的路由&#xff0c;也不用去更改视图函数或模板HTML中的相关代码&#x…
阅读更多...
LNMP服务搭建

LNMP服务搭建

目录 一、安装Nginx 1.关闭防火墙和安全机制 2.安装依赖包 3.创建运行用户 4.编译安装并安装 5.优化路径 6. 添加 Nginx 系统服务 7.赋权并重启服务 二、安装Mysql数据库 1、安装Mysql环境依赖包 2.创建运行用户 3.编译安装 4.修改mysql 配置文件 5.更改mysql安装目录和…
阅读更多...
Linux服务器同步Windows目录同步-rsync

Linux服务器同步Windows目录同步-rsync

前言 最近需要&#xff0c;Linux的服务器同步Windows的一个目录。查了下&#xff0c;大概有三种方法&#xff1a;网盘同步&#xff1b;rsync同步&#xff1b;挂载目录。 网盘同步&#xff0c;可以选择搭建一个Nextcloud 。但是问题在于&#xff0c;我需要的是&#xff0c;客户…
阅读更多...
前端开发两年半，我裸辞了

前端开发两年半，我裸辞了

☀️ 前言 一晃两年半过去了&#xff0c;我离开了我的第一份前端开发工作&#xff0c;当你看到这篇文章&#xff0c;我已经离职两个月了&#xff0c;目前仍在艰难求职中&#xff0c;想记录分享一下我的经历&#xff0c;感兴趣的可以继续往下看&#xff0c;希望能给大家一些启示…
阅读更多...
Objective-C 混用UITabBar与UINavigation

Objective-C 混用UITabBar与UINavigation

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 混用UITabBar与UINavigation做app&#xff0c;tab和nav&#xff0c;有时候显示有时候…
阅读更多...
03 Web全栈 浏览器内置对象/事件/ajax

03 Web全栈 浏览器内置对象/事件/ajax

浏览器是一个JS的运行时环境&#xff0c;它基于JS解析器的同时&#xff0c;增加了许多环境相关的内容&#xff0c;用一张图表示各个运行环境和JS解析器的关系如下&#xff1a; 我们把常见的&#xff0c;能够用JS这门语言控制的内容称为一个JS的运行环境&#xff0c;常见的运行环…
阅读更多...
最新文章

Copyright @ 2022~2023