Vue-Router学习记录

news2025/1/4 16:21:35

目录

一.使用路由

1.1配置路由

1.2采用路由

二.路由懒加载

三.路由重定向

四.嵌套路由

五.路由跳转

1.1标签式

1.2编程式

1.3路由的query参数

1.4命名路由 

前言:

vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示

一.使用路由

1.1配置路由

新建一个路由index.js 文件，建立【路径】与【视图组件】之间的映射关系

import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example/ContainerView.vue'
import LoginView from '@/views/example/LoginView.vue'
import NotFoundView from '@/views/example/NotFoundView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component: ContainerView
  },
  {
    path:'/login',
    component: LoginView
  },
  {
    path:'/404',
    component: NotFoundView
  }
]

const router = new VueRouter({
  routes
})

export default router

注:@代表src下

1.2采用路由

在 main.js 中采用我们的路由 js,其实在引入时可以省略index，因为index是个特殊的东西，默认找不到就找index

import Vue from 'vue'
import App from './views/App.vue'
import router from './router/index'//引入路由
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(Element)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

根组件是App.vue,内容为：

<template>
    <div class="all">
        <router-view></router-view>
    </div>
</template>

<router-view> 起到占位作用，改变路径后，这个路径对应的视图组件就会占据 <router-view> 的位置，替换掉它之前的内容

二.路由懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component: () => import('@/views/example/ContainerView.vue')
  },
  {
    path:'/login',
    component: () => import('@/views/example/LoginView.vue')
  },
  {
    path:'/404',
    component: () => import('@/views/example/NotFoundView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

  • 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度

  • 动态导入是将组件的 js 代码放入独立的文件，用到时才加载

三.路由重定向

const routes = [
   {
    path:'/404',
    component: () => import('@/views/example/NotFoundView.vue')
  },
  {
    path:'*',
    redirect: '/404'
  }

]

①redirect 可以用来重定向（跳转）到一个新的地址

②path 的取值为 * 表示匹配不到其它 path 时，就会匹配它

四.嵌套路由

比如当我们进入主页之后有分类，然后当选择其中一个分类之后进入对应的详情，这个时候组件内再要切换内容，就需要用到嵌套路由（子路由） ；官方文档中给我们提供了一个children属性，这个属性是一个数组类型，里面实际放着一组路由；这个时候父子关系结构就出来了，所以children属性里面的是路由相对来说是children属性外部路由的子路由；

const routes = [
  {
    path:'/',
    component: () => import('@/views/example/ContainerView.vue'),
    redirect: '/c/p1',
    children: [
      { 
        path:'c/p1',
        component: () => import('@/views/example/container/P1View.vue')
      },
      { 
        path:'c/p2',
        component: () => import('@/views/example/container/P2View.vue')
      },
      { 
        path:'c/p3',
        component: () => import('@/views/example/container/P3View.vue')
      }
    ]
  },
  {
    path:'/login',
    component: () => import('@/views/example/LoginView.vue')
  },
  {
    path:'/404',
    component: () => import('@/views/example/NotFoundView.vue')
  },
  {
    path:'*',
    redirect: '/404'
  }
]

子路由变化，切换的是 ContainerView 组件 中 <router-view></router-view> 部分的内容

<template>
    <div class="container">
       //路由占位标签
        <router-view></router-view>
    </div>
</template>

五.路由跳转

1.1标签式

container组件内:

<template>
    <div class="container">
            <el-container>
                <el-aside width="200px">
                    <router-link to="/c1/p1">P1</router-link>
                    <router-link to="/c1/p2">P2</router-link>
                    <router-link to="/c1/p3">P3</router-link> 
            </el-container>
    </div>
</template>
<script>

export default options;
</script>

标签导航<router-link>，<router-link>是通过转义为<a></a>标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

router-link属性介绍：

  • to：用于指定跳转的路径
  • tag：tag可以指定<router-link>之后渲染成什么组件，比如我们下面的代码会被渲染成一个<li>元素，而不是<a> 。 如：<router-link to='/home' tag='li'>
  • replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
  • active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

1.2编程式

container组件内:

<template>
    <div class="container">
            <el-header>
               <el-button type="primary" icon="el-icon-edit" 
                   circle size="mini" @click="jump('/c1/p1')"></el-button>
               <el-button type="success" icon="el-icon-check" 
                   circle size="mini" @click="jump('/c1/p2')"></el-button>
               <el-button type="warning" icon="el-icon-star-off" 
                   circle size="mini" @click="jump('/c1/p3')"></el-button>
            </el-header>
    </div>
</template>
<script>
const options = {
    methods : {
        jump(url) {
            this.$router.push(url);//跳转路由
        }
    }
}
export default options;
</script>

  • 其中 this.$router 是拿到路由对象

  • push 方法根据 url 进行跳转

补充：

 

1.3路由的query参数

①传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id: m.id,
       title: m.title
		}
	}"
>跳转</router-link>

②接收参数

$route.query.id
$route.query.title

实例如下：

src/router.index.js

Vue Router query 命名路由 params props

import VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
  routes:[
    {
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'news',
          component:News
        },
        {
          path:'message',
          component:Message,
          children:[
            {
              path:'detail',
              component:Detail
            }
          ]
        }
      ]
    }
  ]
})

src/pages/Message.vue

Vue Router query 命名路由 params props

<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>&nbsp;&nbsp; -->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
                            path:'/home/message/detail',
                            query:{
                            }
                          }">
          {{m.title}}
      </router-link>&nbsp;&nbsp;
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name:'News',
    data(){
      return{
        messageList:[
          {id:'001',title:'消息001'},
          {id:'002',title:'消息002'},
          {id:'003',title:'消息003'}
        ]
      }
    }
  }
</script>

src/pages/Detail.vue

<template>
    <ul>
        <li>消息编号：{{ $route.query.id }}</li>
        <li>消息标题：{{ $route.query.title }}</li>
    </ul>
</template>
<script>
    export default {
        name:'Detail'
    }
</script>

1.4命名路由 

作用：可以简化路由的跳转

使用：

①给路由命名

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
          name:'hello' // 给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

②简化跳转

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		    id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

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

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

相关文章

常见Lidar点云数据处理及可视化软件汇总

常见Lidar点云数据处理及可视化软件汇总

常见的点云处理及可视化软件有&#xff1a; CloudCompare、Globalmapper、Pix4d、ArcGIS&#xff08;Pro&#xff09;、Lidar 360、PCL等等。 文章目录1. CloudCompare2. Globalmapper3. Pix4d4. ArcGIS&#xff08;Pro&#xff09;5. Lidar 3606. PCL1. CloudCompare CloudCo…
阅读更多...
2022年11月20日 15点 纳指正在走到一个黄金分割点附近，是否会真的按照自然规则做调整，可以看看数据的威力。

2022年11月20日 15点 纳指正在走到一个黄金分割点附近，是否会真的按照自然规则做调整，可以看看数据的威力。

行情核心源头: 纳斯达克指数&#xff0c; 是否会符合大数据规则&#xff0c;走黄金分割线规则 [数据说话] 第一波下跌3820&#xff0c; 反弹2299点&#xff0c;反弹了60%&#xff0c;接近61.8%第二波下跌4159&#xff0c;反弹2612&#xff0c;反弹了62.8%&#xff0c;接近61.…
阅读更多...
借助第三方工具网站完成消息自动推送

借助第三方工具网站完成消息自动推送

文章目录前言pushplus是什么pushplus测试使用代码发送注意的问题总结前言 寻找消息推送的起因是之前买过一台云服务器&#xff0c;用于开发环境搭建和学习&#xff0c;最近想用它进行一些数据分析&#xff0c;而数据分析的结果如果每次都需要登录服务器来看就有点“太老土”了…
阅读更多...
今天解决了一个主从延迟导致超发的问题

今天解决了一个主从延迟导致超发的问题

主从同步过程 MySQL主从同步由主节点dump线程、从节点 I/O 线程、从节点SQL线程三个线程配合完成。 1、从节点上的 I/O 进程主从去连接主节点&#xff0c;并带上同步的开始位置即指定日志文件的位置之后的日志内容 2、主节点接收到来自从节点的 I/O 请求后&#xff0c;通过主…
阅读更多...
c风格字符串，数组，string ，vector

c风格字符串，数组，string ，vector

c风格字符串&#xff0c;数组&#xff0c;string &#xff0c;vector 数组 数组下标 数组下标通常定义为 size_t type arrayName [ arraySize ][arraySize1]; arraySize必须是一个大于等于零的整数常量。 1因为sizeof的计算值是个常量&#xff0c;所以sizeof的计算值和字…
阅读更多...
深度学习基础-2

深度学习基础-2

文章目录0 前言1 全连接神经网络2 激活函数2.1 Sigmoid2.2 Tanh2.3 ReLU2.4 Leaky ReLU3 交叉熵损失4 计算图与反向传播4.1 计算图4.2 梯度消失与梯度爆炸4.3 动量法5 权重初始化5.1 全零初始化5.2 标准随机初始化5.3 Xavier初始化5.4 Kaming初始化6 批归一化7 参考资料0 前言 …
阅读更多...
腾讯云轻量应用服务器内网连接互通有什么限制？

腾讯云轻量应用服务器内网连接互通有什么限制？

腾讯云轻量应用服务器内网连接互通有什么限制&#xff1f;腾讯云轻量应用服务器可以通过内网访问同地域下的云数据库、云服务器CVM或负载均衡等实例吗&#xff1f;不可以&#xff0c;只能通过公网连接互通&#xff0c;主机教程网来详细说下腾讯云轻量应用服务器内网互通限制说明…
阅读更多...
快速MOCK数据并插入数据表中（MySQL）

快速MOCK数据并插入数据表中（MySQL）

问题描述&#xff1a;在学习使用SQL语句操作数据库的时候&#xff0c;添加十几二十条数据总感觉不够直观&#xff0c;如何快速批量制造相对真实的假数据&#xff0c;以供测试使用&#xff1f; 一、操作步骤 1.准备一张表 CREATE TABLE IF NOT EXISTS products (id INT PRIMA…
阅读更多...
关于qt中label挡住了dockwidget的窗体边缘

关于qt中label挡住了dockwidget的窗体边缘

关于qt中label挡住了dockwidget的窗体标题 1.问题描述&#xff1a; dock_Image new QDockWidget(tr("图像"), this);setCentralWidget(dock_Image);imgLabel new QLabel(dock_Image);imgLabel->setScaledContents(true); // 设置QLabel自动适应图像大小//dock…
阅读更多...
win下载安装不同java版本教程

win下载安装不同java版本教程

不同版本jdk下载与安装 1. 下载 最全java版本官方下载地址https://www.oracle.com/java/technologies/downloads 下载.exe安装文件即可 2.安装 下载后双击exe程序即可安装&#xff0c;在第二布时要特别注意&#xff1a;安装路径不要有中文或含有空格 3.检查java是否安装成…
阅读更多...
你在编程过程中养成了哪些好习惯？

你在编程过程中养成了哪些好习惯？

写工作日志。 我一直有大量写笔记的习惯。编程的时候&#xff0c;也经常遇到一些麻烦的问题&#xff0c;思路转瞬即逝&#xff0c;于是把所有这些思路记录下来&#xff0c;会在以后的搜索中成为重要的灵感来源。 我的工作日志里通常以项目为单位&#xff0c;包含四个重要的章…
阅读更多...
[Linux/初学者]Vim文本编译器的模式切换及其常用指令

[Linux/初学者]Vim文本编译器的模式切换及其常用指令

前言 Linux 系统中所有的内容都以文件的形式进行存储&#xff0c;当在命令行下更改文件内容时&#xff0c;常会用到文本编辑器。 Vi编辑器是Unix及Linux系统下的标准编辑器&#xff0c;同时也是Linux中最基本的文本编辑器&#xff0c; Vim编译器则是Vi编译器的升级版本&…
阅读更多...
ActionVLAD算法详解

ActionVLAD算法详解

文章地址&#xff1a;https://rohitgirdhar.github.io/ActionVLAD/ 代码地址&#xff1a;https://github.com/rohitgirdhar/ActionVLAD/ 该文章由CMU、Adobe、法国国立计算机及自动化研究院联合提出&#xff0c;被CVPR2017收录。 该文章的创新点在于将vlad使用到动作分类任务…
阅读更多...
化工原理 --- 热量传递（补充）

化工原理 --- 热量传递（补充）

一.管外作强制对流的对流传热系数 1.管外作强制流动一般分为两种形式 ---- 分别是直列流动和错列流动 上图是两种流动方式下的传热系数计算公式 二.管外作强制对流 --- 换热器管间流动 在管内的强制对流传热分为两种形式&#xff0c;分别是圆缺形挡板和圆盘形挡板 1.圆缺形挡板…
阅读更多...
计算机毕业设计之java+ssm社会保险养老系统

计算机毕业设计之java+ssm社会保险养老系统

项目介绍 自“金保工程”在全国实施以来&#xff0c;促进了劳动和社会保障工作处理方法全面完善&#xff0c;可以把社会保险注册、登记、申请、审核、收取、给付、核查、资金账户、社保管理以及劳动力市场相结合&#xff0c;实现劳动就业、择业、创业和社会保险管理品台的共享…
阅读更多...
[附源码]Python计算机毕业设计白果园网上水果超市

[附源码]Python计算机毕业设计白果园网上水果超市

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
免费查题系统

免费查题系统

免费查题系统 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;点击跳转&a…
阅读更多...
二分法：一看就会，一写就废

二分法：一看就会，一写就废

目录二分法原理使用条件使用情况二分查找位置二分查找答案两者区别二分查找经典题目二分答案经典模板经典例题二分法原理 我们假设一下&#xff0c;你的女朋友买了件衣服&#xff0c;告诉你衣服的价格在200~2000之间&#xff0c;让你猜这件衣服的价格&#xff0c;怎么猜才能猜的…
阅读更多...
JS使用Vue自定义组件实现动态多层数据渲染+递归+踩坑

JS使用Vue自定义组件实现动态多层数据渲染+递归+踩坑

Hi I’m Shendi 在没有使用打包软件(WebPack&#xff0c;VueCli&#xff09;的原生环境下使用vue自定义组件 文章目录组件名称规则全局组件和局部组件简单的递归Demo组件名称规则 首先说一下组件名称规则&#xff0c;注册的组件名称用了大写的话在使用时则将大写改为 -大写的小…
阅读更多...
网络系统管理 - SDCserver虚拟机配置

网络系统管理 - SDCserver虚拟机配置

SDCserver- 配置 1．SDCserver 系统基础环境配置 （1）请根据附件说明或提供的基础信息，配置服务器的主机名，IP 地址，创建要求的用户名及密码； 配置Windows 防火墙，仅
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023