位置: IT常识 - 正文

vue路由的安装和使用(vue的路由器)

编辑:rootadmin
vue路由的安装和使用

推荐整理分享vue路由的安装和使用(vue的路由器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue路由配置步骤,vue路由配置步骤,vue3.0路由,vue路由搭建,vue的路由器,vue3.0路由,vue的路由器,vue 路由安装,内容如对您有帮助,希望把文章链接给更多的朋友!

@TOCVue 路由 vue-router

1 安装vue-routervue路由的安装和使用(vue的路由器)

npm i vue-router -s

2 创建路由模块

// src/router/index.js就是当前项目的路由模块// 1 导入Vue 和VueRouter的包import Vue from 'vue'import VueRouter from 'vue-router'// 导入路由要用到的组件import Home from '../components/Home.vue'import Movie from '../components/Movie.vue'import About from '../components/About.vue'// 2 调用vue.use()函数,把VueRouter安装为vue插件Vue.use(VueRouter)// 3 创建路由的实例对象const router = new VueRouter({ // 定义数组routes[],对应哈希地址与组件之间的关系 routes: [ //路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About, // about组件里的嵌套路由 children: [ { path: 'tab1', component: Tab1 }, { path: 'tab2', component: Tab2 } ] }, // 路由重定向:强制跳转 { path: '/', redirect: '/home' } ]})// 4 向外共享路由的实例对象export default router3 在main.js导入路由模块// 1 导入路由模块,拿到路由实例import router from '../src/router/index.js'new Vue({ render: h => h(App), // 2 挂载路由 router: router}).$mount('#app')4 在App.vue中使用router-view占位符<template> <div class="app-container"> <h1>App2 组件</h1> //使用router-link替代a链接 // <a href="#/home">首页</a> // <a href="#/movie">电影</a> // <a href="#/about">关于</a> <hr /> <router-view ></router-view> </div></template>5 动态路由5.1 定义:把hash地址可变的部分定义为参数项,提高路由规则的可复用性5.2 在vue-router中使用英文的冒号定义参数项:id

5.3 在组件中使用$route.prams.id进行调用//Movie组件<template> <div class="movie-container"> <h3>Movie 组件---{{$route.params.id}}</h3> <hr> <button @click="showThis">打印this</button> </div></template>注意1:在hash地址中,/后面的参数叫做“路径参数”在路由“参数对象”$route中,需要使用$route.prams来访问路径参数注意2 在hash地址中,“?”后面的参数叫做“查询参数”

在路由“参数对象”中, 需要使用$route.query来访问查询参数

注意3 在hash地址中,path只是路径部分,fullPath才是完整路径

例如 " /movie/1?name=%27as%27 " 是fullPath " /movie/1" 是path

6
本文链接地址:https://www.jiuchutong.com/zhishi/298414.html 转载请保留说明!

上一篇:Python 基础(十二):字典(python基础100例)

下一篇:【机器学习】KNN算法及K值的选取

  • 个人网站做推广该做哪些事,哪几点适用于网站推广(个人网站推广app)

    个人网站做推广该做哪些事,哪几点适用于网站推广(个人网站推广app)

  • 苹果手表设置里键盘在哪(苹果手表设置里没有通用)

    苹果手表设置里键盘在哪(苹果手表设置里没有通用)

  • vivo手机怎么进入工程模式(vivo手机怎么进入隐私空间)

    vivo手机怎么进入工程模式(vivo手机怎么进入隐私空间)

  • 为什么苹果手机刷朋友圈一卡一卡的(为什么苹果手机的手电筒打不开了)

    为什么苹果手机刷朋友圈一卡一卡的(为什么苹果手机的手电筒打不开了)

  • iphone接不到陌生电话怎么办(iphone接不到陌生电话但是会显示未接来电)

    iphone接不到陌生电话怎么办(iphone接不到陌生电话但是会显示未接来电)

  • 苹果11为什么改不了微信铃声(苹果11为什么改了密码 男朋友每次都知道)

    苹果11为什么改不了微信铃声(苹果11为什么改了密码 男朋友每次都知道)

  • word怎么选中不相连文字(word怎么选中不相邻的多行)

    word怎么选中不相连文字(word怎么选中不相邻的多行)

  • 美颜相机视频只能录一分钟(美颜相机拍的视频为什么没有声音)

    美颜相机视频只能录一分钟(美颜相机拍的视频为什么没有声音)

  • 怎么注销身份证绑定的手机号(怎么注销身份证绑定的其他微信号)

    怎么注销身份证绑定的手机号(怎么注销身份证绑定的其他微信号)

  • 视频忙线中属于什么状态(视频显示忙线)

    视频忙线中属于什么状态(视频显示忙线)

  • qq互联业务登录能干嘛(qq互联业务登录直接被盗)

    qq互联业务登录能干嘛(qq互联业务登录直接被盗)

  • g3220配什么主板(g3220t配什么主板)

    g3220配什么主板(g3220t配什么主板)

  • 电脑不受控制乱动(电脑不受控制乱操作怎么回事)

    电脑不受控制乱动(电脑不受控制乱操作怎么回事)

  • 荣耀20和荣耀20pro区别(荣耀20和荣耀20pro手机壳通用吗)

    荣耀20和荣耀20pro区别(荣耀20和荣耀20pro手机壳通用吗)

  • 微信可以远程吗(微信可以远程控制对方手机吗)

    微信可以远程吗(微信可以远程控制对方手机吗)

  • 光猫可以当交换机用吗(光猫当交换机路由器)

    光猫可以当交换机用吗(光猫当交换机路由器)

  • 纳米技术可以用在哪些地方(纳米技术可以用来修复土壤污染吗)

    纳米技术可以用在哪些地方(纳米技术可以用来修复土壤污染吗)

  • 华为m6青春版什么时候上市(华为m6青春版什么处理器)

    华为m6青春版什么时候上市(华为m6青春版什么处理器)

  • 手机摔了对焦模糊(手机摔了一下对焦模糊)

    手机摔了对焦模糊(手机摔了一下对焦模糊)

  • 手机欠费不交会注销吗(手机欠费不交会影响征信吗)

    手机欠费不交会注销吗(手机欠费不交会影响征信吗)

  • 华为mate30声音键在哪里(华为mate30声音键会无故自己调大)

    华为mate30声音键在哪里(华为mate30声音键会无故自己调大)

  • 辅存储器有哪些(辅助存储器有)

    辅存储器有哪些(辅助存储器有)

  • iqoo怎么开启跑马灯(iqooz3跑马灯怎么设置)

    iqoo怎么开启跑马灯(iqooz3跑马灯怎么设置)

  • vivo手机个人中心设置在哪(vivo手机个人中心在哪里找)

    vivo手机个人中心设置在哪(vivo手机个人中心在哪里找)

  • 6p发热严重解决方法(6p手机发烫严重具体什么原因)

    6p发热严重解决方法(6p手机发烫严重具体什么原因)

  • 微信加人你的回复太快请稍后再试(微信加人时的回复记录哪里可以看)

    微信加人你的回复太快请稍后再试(微信加人时的回复记录哪里可以看)

  • 汇算清缴补交所得税会计分录小企业会计政策
  • 产权转移书据印花税包括什么
  • 装修款需要开发票吗
  • 个税app显示退税已完成,怎么没收到钱呢???
  • 普通发票金额和申报工资有关系吗
  • 小规模纳税人增值税税率
  • 土地转让如何缴纳增值税
  • 分批收款收据怎么写
  • 企业所得税研发费用100%扣除的有哪些企业
  • 买酒 专票
  • 营改增金融商品范围
  • 应交增值税会计科目
  • 融资租赁与经营租赁的相同点
  • 外地预缴工会其他经费计入什么科目?
  • 所得税费用计算典型例题
  • 普通发票跨月能入账吗
  • 当月已认证的可抵扣增值税
  • mac与iphone联动
  • uefi启动u盘安装win10系统的详细流程
  • win11怎么调整任务栏位置
  • 出差补贴算工资薪金吗
  • 开发票时已交的税金怎么做帐?
  • 固定资产丢失进项税需要转出吗
  • 工程收入和成本的区别
  • 十分钟带你了解阿氏圆
  • 财务如何核对会计信息
  • PHP:mcrypt_get_cipher_name()的用法_Mcrypt函数
  • 企业支付给员工的一次性伤残就业补助金计入哪项费用
  • 免税农产品进项转出计算
  • 关税计入纳税总额么
  • 增值税发票丢失怎么补开
  • 什么是完税证明?完税证明丢了怎么办公司
  • 小规模纳税人货款怎么算
  • 固定资产一次性折旧账务处理
  • 小规模纳税人收入是含税还是不含税
  • 应纳税所得额中国债利息收入
  • 企业税收风险因素分析
  • 个税哪种申报不用交个税的
  • 企业支付的一次性就业补助金
  • 收到现金货款怎么处理
  • 企业解散清算程序
  • 分配利润和分配红利
  • 公司向股东借款最新规定
  • 资产负债表中的股东权益由什么组成
  • 出库单上面的单位写谁的
  • 营业外支出会影响所有者权益吗
  • 离职员工代缴社保协议
  • 老板个人借款要纳税吗
  • 最新职工福利费列支范围
  • sql解析原理
  • sqlserver性能优化
  • xp复制粘贴功能失效
  • xp文件夹选项在哪里打开
  • ubuntu复制文件到当前文件夹
  • bios怎么调高性能
  • linux系统中安装jar包没有
  • iphone制造成本
  • backupwx.exe
  • win8系统启动项在哪
  • uca1
  • 远程操作win10
  • windows更新后一直在欢迎界面
  • win8如何升级到win10系统版本
  • win7系统开机黑屏自检
  • 批处理/a
  • jquery validate表单校验html
  • 正则批量匹配
  • 九宫寓意和象征
  • shell脚本实现自动化巡检报警发送邮箱
  • python问题及解决方法
  • html css js 实战案例
  • js弹出提示窗口
  • javascript新手教程
  • js合并字符串
  • 12333医保缴费具体步骤
  • 施工费税费
  • 关于工龄认定的司法解释
  • 北京市国家税务局发票查询平台
  • 河南省国家税务局官网
  • 成都那些地方属于正东方向
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设