位置: 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值的选取

  • 外购配套费为什么不计利润
  • 从租计征房产税怎么申报
  • 土地增值税清算方法与技巧
  • 生产经营所得的税率表
  • 车险会计分录处理怎么写
  • 施工企业挂靠账务处理怎么做
  • 购销合同印花税优惠政策
  • 材料成本差异月初贷方余额表示什么
  • 预付款项包括哪些项目
  • 退所得税的分录
  • 公司为员工租房费用的会计分录
  • 商贸企业涉税问题
  • 小规模纳税人销售额
  • 公司购买房产给个人发票
  • 买机票返钱
  • 减免税款怎么入账
  • 小规模纳税人如何纳税
  • 工业企业增值税缓交政策
  • 期货盈利需要交什么税
  • 分公司负债,总公司要负担
  • 非上市公司股权转让
  • 企业所得税中的资产总额怎么填
  • windows10如何开启wifi
  • 即征即退和先征后退适用范围
  • 未开票收入跨年度如何申报冲回
  • 出库单可以补吗
  • 查补以前年度企业所得税的申报处理
  • 直线法计提折旧每年都一样吗
  • php中自定义常量的函数是
  • 装系统如何不安装自带软件
  • 企业所得税中工资总额
  • 绿化公司属于哪个行业
  • 红票申请单怎么开
  • mongodb $nin
  • sql server 递归
  • 计提制造费用
  • 行政事业单位赞助支出会计核算办法
  • 查看、修改mysql的用户名和密码
  • 小规模纳税人免税政策2022
  • 入股投资的钱能取出来吗
  • 什么时候不能计入开办费
  • 代发的工资如何做账
  • 暂估成本的账务处理分录
  • 疫情防控重点保障企业名单
  • 转账给个人账户
  • 无形资产根据什么科目填列
  • 从事股权投资业务的企业业务招待费
  • 业务招待费可以结转下年抵扣吗
  • 养老保险 退钱
  • 利息支出税前扣除的规定
  • 什么叫进项税率
  • 小规模纳税人租赁费税率
  • 所有者权益变动表图片
  • 库存现金是负数怎么调
  • 需求价格弹性是ep还是ed
  • 商业企业库存商品
  • sql server无法连接服务器的原因
  • 怎么怎么恢复
  • 如何制作u盘系统win7
  • centos7添加ip地址
  • win7多用户怎么删除
  • win8录音文件保存在哪
  • ghost到一半报错
  • 如何避免升级为查帐征收
  • 双硬盘 win10
  • macbook显示flash插件故障
  • win7安装kb4534310补丁失败
  • input lead
  • 基于javascript的毕业设计选题
  • 数据结构分析时间复杂度
  • 在windows下搭建snort和base
  • js新开一个窗口
  • node.js操作mssql
  • js new()
  • js页面滚动到指定位置
  • 国家税务局直属单位招聘
  • 广东税务实名注册
  • 河南助学金申请表
  • 注册会计师和注册审计师哪个厉害
  • 国家税务总局176号公告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设