首页 > 其他分享 >Vue69 路由的基本使用

Vue69 路由的基本使用

时间:2024-09-23 12:22:22浏览次数:10  
标签:基本 About vue import Vue69 VueRouter Home router 路由


路由

  1. 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
  2. 前端路由:key是路径,value是组件。

1.基本使用

  1. 安装vue-router,命令:npm i vue-router@3
  2. 应用插件:Vue.use(VueRouter)
  3. 编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
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
  1. 实现切换(active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link>
  1. 指定展示位置
<router-view></router-view>

代码

Vue69 路由的基本使用_前端

About.vue

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

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

Home.vue

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

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

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

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

main.js

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

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

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

运行

Vue69 路由的基本使用_intellij-idea_02


标签:基本,About,vue,import,Vue69,VueRouter,Home,router,路由
From: https://blog.51cto.com/u_15295225/12088532

相关文章

  • Python NumPy处理数组的基本用法代码示例
    NumPy是一个用于处理数组(向量和矩阵)以及进行数值运算的Python库。下面是一些简单的例子来展示如何使用NumP:示例1:创建数组importnumpyasnpa=np.array([1,2,3])#创建一个一维数组b=np.array([[1,2,3],[4,5,6]])#创建一个二维数组print(a)print(b)示......
  • Django 路由层 —— 基础用法,以及底层如何实现的
    路由层负责网页URL与函数/类的对应关系用法基本用法urls.py:urlpatterns=[#基本用法path('login/',views.login),#动态输入参数path('info/<int:v1>',views.info),#可以同时传多个参数,path:v3会记录v1-v2/后面的所有路径......
  • vue如何挂载路由
            在Vue中,挂载路由并不是指一个直接的API调用或方法,而是一个过程,它涉及到将VueRouter实例与Vue应用的根实例进行关联。这个过程通常是在Vue应用的入口文件中完成的,比如main.js或app.js。1、安装VueRouter:        使用npm或yarn将VueRouter添加到你......
  • 交换机+防火墙+路由器
    1、网络拓扑图2、基础网络配置1)路由nat2)防火墙策略3)交换机vlan3、详细配置路由器:<r2>displaycurrent-configuration [V200R003C00]#sysnamer2#snmp-agentlocal-engineid800007DB03000000000000snmp-agent #clocktimezoneChina-Standard-Timeminus08:00:00#......
  • 学霸带你了解游戏角色成长装备系统基本运算
    探索角色成长与装备系统在现代电子游戏中,角色成长和装备系统是游戏设计的核心要素之一。理解这些系统的运作原理,不仅能帮助玩家更有效地提升游戏体验,还能帮助开发者优化游戏设计,确保游戏的平衡性与乐趣。本篇文章将详细探讨角色属性基础与成长、经验值计算公式、装备系统的影......
  • Python语言的基本要素
    1.Python的语句(1)程序语句中,所有的字符都必须是英文字符(半角),不能是中文字符(全角)。(2)"#"后是注释,注释的内容不执行。("ctr+/"可加多行注释)2.常量(1)常量表示固定不变的数据(值)(2)常见常量有:数值型(整数)、字符串、布尔型(true表示真、false表示假)、空(None表示啥也不是)3.变量(1)变量是......
  • 运维的基本知识点及分类工作
    目录:什么是Linux运维运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务上的上线与运作的正常在运转的过程中,对他进行维护,集合了网络、系统、数据库、开发、安全、监控于一身的技术运维又包括DBA运维,网站运维,虚拟化运维,监控运维,游戏运维等等运维的分类系统运维(SYS):1.......
  • 路由器的工作原理及基本设置详解
    路由器是现代网络架构中的关键设备,负责在不同网络之间转发数据包。理解路由器的工作原理及其基本设置,对于构建和维护高效、安全的网络环境至关重要。本文将详细讲解路由器的基本原理和常见设置步骤。一、路由器的工作原理1.数据包转发路由器的核心功能是转发数据包。当数据......
  • 面向对象基本方法
    一、面向对象需求分析的相关概念对象在开发时会将人、物等都抽象为对象,人、物的特性会变成对象的属性,对象还有相关的操作方法,即这个人(物)在系统内部可以做些什么;对象由标识属性和服务构成,他们被封装为一个整体以接口的形式对外提供服务类将多个对象的共性抽取出来形成类,一个类......
  • note.js与vue.js常用基本命令
    Note.js基本命令1、安装Node.js包npminstall<package-name>2、全局安装包npminstall-g<package-name>3、查看已安装的包npmlist4、初始化项目并创建package.json文件npminit5、更新包到最新版本npmupdate<package-name>6、卸载包npmuninstall<pack......