完整的 vue-router 导航解析流程,vuerouter导航解析流程
这篇文章主要介绍了某视频剪辑软件路由器编程式导航的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
页面导航的两种方式
声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的答/答链接或某视频剪辑软件中的路由器链路/路由器链路
编程式导航：通过调用Java脚本语言形式的应用程序接口实现导航的方式，叫做编程式导航
例如：普通网页中的location.href
编程式导航基本用法
常用的编程式导航应用程序接口如下：
这个router.push(hash地址)
这个router.go(n)
const User={
模板： divbutton @click=goRegister 跳转到注册页面/button/div ，
方法：{
goRegister: function(){
//用编程的方式控制路由跳转
这个1000美元路由器。push(/register )；
}
}
}
具体吗实现：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
标题文档/标题
！-导入某视频剪辑软件文件-
！-脚本src= ./lib/vue_2.5.22.js/script -
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
！-脚本src= ./lib/vue-router _ 3。0 .2 .js /脚本-
script src= https://UNP kg。com/vue-router/dist/vue-router。js /脚本
/头
身体
！-被伏特计实例所控制的区域-
div id=应用程序
router-link to=/user/1 user 1/router-link
路由器链接到=/用户/2 用户2/路由器链接
路由器链接：to={ name: user ，params:{ id:3 } } 用户3/路由器链接
路由器链接到=/register register/路由器链接
！-路由占位符-
路由器视图/路由器视图
/div
脚本
const User={
道具：[id ， uname ， age]，
模板：` div
氕用户组件-用户编号为：{{id}} -姓名为：{{uname}} -年龄为：{{age}}/h1
button @click=goRegister 跳转到注册页面/按钮
/div `，
方法：{
goRegister() {
这个. router.push(/register)//编程式导航
}
},
}
常量寄存器={
模板：` div
氕寄存器组件/h1
button @click=goBack 后退/按钮
/div `，
方法：{
goBack() {
这个. router.go(-1)
}
}
}
//创建路由实例对象
const router=new VueRouter({
//所有的路由规则
路线：[
{路径："/",重定向："/用户"},
{
//命名路由
姓名：用户，
路径："/user/:id "，
组件：用户，
道具：route=({ uname: zs ，年龄：20，id: route.params.id })
},
{路径："/注册"，组件：注册}
]
})
//创建伏特计实例对象
const vm=new Vue({
//指定控制的区域
埃尔： #app ，
数据：{},
//挂载路由实例对象
//路由器：路由器
路由器
})
/脚本
/body
/html
router.push() 方法的参数规则
//字符串（路径名称)
router.push(/home )
//对象
router.push({ path: /home })
//命名的路由（传递参数)
router.push({ name: /user ，params: { userId: 123 }})
//带查询参数，变成/注册？uname=lisi
router.push({ path: /register ，query: { uname: lisi }})
到此这篇关于某视频剪辑软件路由器编程式导航的实现代码的文章就介绍到这了，更多相关某视频剪辑软件路由器编程式导航内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。