vue-router使用,vue中route
本文介绍了vue-router的使用方法，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
目录
I、vue-router1、简介2、使用流程2、基本路由实现3、嵌套路由4、缓存路由组件1、为什么使用2、如何使用3、完整代码5、传递参数1、按url (param)传递2、按查询传递3、按param传递6、$route和$router的区别1、
一、vue-router
1、简介
(1) SPA:单页应用，简单理解为只有一个网页的应用。也就是说，web应用程序加载单个HTML页面，并根据用户与程序的交互动态更新页面。当它加载页面时，不会加载整个页面，而只会更新部分内容。
(2)路由：指SPA的路径管理器。基于SPA路由和组件，路由指定访问路径，并建立路由和组件之间的映射关系。通过切换路线，加载不同的组件。
2、使用流程
步骤1:安装路由
[命令行输入]
npm安装vue-路由器-保存
步骤2:介绍路由
【main.js】
//介绍vue路由器
从“vue-router”导入VueRouter
//使用vue路由器
vue . use(vue router)；
步骤3:创建路由对象并声明路由规则(创建路由)
新的VueRouter({
路线：[
//对象一个接一个
{ path:“/Home”，组件：Home }，
{路径：“/about”，组件：About }
]
});
步骤4:将路由器实例传递给Vue实例(注册路由)
新Vue({
路由器：路由器，//使用路由对象
render: h=h(App)，
}).$ mount(“# app”)
第五步：使用路由
//选择路线
路由器链接到=/about about/路由器链接
路由器链接到=/home home/路由器链接
//映射组件
路由器视图/路由器视图
二、基本路由实现
(1)文件结构：
(2)完整代码：
【main.js】
从“vue”导入Vue
从导入应用程序。/App.vue
//引入路由对象
从导入路由器。/router/router.js
Vue.config.productionTip=false
新Vue({
路由器：路由器，//使用路由对象
render: h=h(App)，
}).$ mount(“# app”)
【App.vue】
模板
差异
差异
路由器链接到=/about about/路由器链接
br/
br/
路由器链接到=/home home/路由器链接
/div
br/
差异
路由器视图/路由器视图
/div
/div
！应用程序
/模板
脚本
导出默认值{
}
/脚本
风格
/风格
【About.vue】
模板
divAbout/div
/模板
脚本
/脚本
风格
/风格
【Home.vue】
模板
divHome/div
/模板
脚本
/脚本
风格
/风格
【router.js】
//引入组件
从“vue”导入Vue
从“vue路由器”导入vue路由器
关于从导入./views/About.vue
从以下位置导入主页./views/Home.vue
//使用组件
Vue.use(VueRouter)
//抛出一个VueRouter
导出默认的新VueRouter ({
路线：[{
路径：“/about”，
组件：关于
},
{
路径：“/home”，
组件：主页
},
//默认情况下选择“关于组件”
{
路径：“/”，
重定向：“/关于”
},
]
})
(3)截图：部分刷新组件的效果
单击Home切换到Home组件，url路径会发生变化。
单击“关于”切换到“关于组件”，url路径会发生变化。
三、嵌套路由
中间路线由。
(1)文件结构
(2)完整的代码
[在基本路由的基础上修改代码以在Home组件中设置路由]
【router.js】
//引入组件
从“vue”导入Vue
从“vue路由器”导入vue路由器
关于从导入./views/About.vue
从以下位置导入主页./views/Home.vue
从导入新闻./views/News.vue
导入邮件自./views/Message.vue
//使用组件
Vue.use(VueRouter)
//抛出一个VueRouter
导出默认的新VueRouter({
路线：[{
路径："/关于"，
组件：关于
},
{
路径："/home "，
成分：家，
//使用孩子们定义子路由
孩子：[{
路径："/家庭/新闻",
组件：新闻
},
{
路径："消息",//简写
组件：消息
},
//默认选中新闻组件
{
路径： ,//简写
重定向："/主页/新闻"
},
]
},
{
路径："/",
重定向："/关于"
}
]
})
【Home.vue】
模板
差异
差异
氕主页/h1
路由器链接到=/家庭/新闻新闻/路由器链接
br/
br/
路由器链接到=/home/message 消息/路由器链接
/div
br/
br/
差异
路由器视图/路由器视图
/div
/div
/模板
脚本
/脚本
风格
/风格
【Message.vue】
模板
divMessage/div
/模板
脚本
/脚本
风格
/风格
【News.vue】
模板
差异新闻/分部
/模板
脚本
/脚本
风格
/风格
(3)测试截图：
初始画面，默认选中关于组件
点击主页组件，默认选中新闻组件。
点击消息组件。
四、缓存路由组件
1、为什么使用
默认情况下，切换路由时，被切换的路由会被销毁，当重新切回时会被再次创建。如果想要保留之前的修改，可以使用缓存路由组件对象，缓存之前的修改。
2、如何使用
【原写法】
路由器视图/路由器视图
【修改后】
点火电极
路由器视图/路由器视图
/保持活力
3、完整代码
【对上述代码进行修改，增加一个文本框】
【App.vue】
模板
差异
差异
路由器链接到=/about about/路由器链接
br/
br/
路由器链接到=/home home/路由器链接
/div
br/
差异
点火电极
路由器视图/路由器视图
/保持活力
/div
/div
！应用程序
/模板
脚本
导出默认值{
}
/脚本
风格
/风格
【About.vue】
模板
差异
关于
输入类型=text /
/div
/模板
脚本
/脚本
风格
/风格
截图：
初始界面：
输入数据：
切换到主页组件
再切回关于组件，值没有被清除。
五、传递参数
1、通过url传递（param传递）
使用冒号参数名(:名称)作为占位符，并通过全球资源定位器(统一资源定位器)传递参数，使用$route.params接收参数。
【对上面代码进行修改】
【router.js】
//引入组件
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
关于从导入./views/About.vue
从以下位置导入主页./views/Home.vue
//使用组件
Vue.use(VueRouter)
//向外抛出一个武鲁特
导出默认的新VueRouter({
路线：[{
路径："/about/:name/:age "，
组件：关于
},
{
路径："/home "，
组件：主页
},
{
路径："/",
重定向："/home "
}
]
})
【App.vue】
模板
差异
差异
router-link to=/About/Tom/22 About/router-link
br/
br/
路由器链接到=/home home/路由器链接
/div
br/
差异
点火电极
路由器视图/路由器视图
/保持活力
/div
/div
！应用程序
/模板
脚本
导出默认值{
}
/脚本
风格
/风格
【About.vue】
模板
差异
关于
br /
名称：{{$route.params.name}}
br /
年龄：{{$route.params.age}}
/div
/模板
脚本
/脚本
风格
/风格
【Home.vue】
模板
差异
氕主页/h1
/div
/模板
脚本
/脚本
风格
/风格
截图：
初始界面
点击关于，可以传递并接收参数
2、通过query传递
使用小路匹配路由，并根据名字定位路由，通过询问传递参数，并使用$route.query接收参数。
【对上面代码进行修改】
【router.js】
//引入组件
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
关于从导入./views/About.vue
从以下位置导入主页./views/Home.vue
//使用组件
Vue.use(VueRouter)
//向外抛出一个武鲁特
导出默认的新VueRouter({
路线：[{
路径："/关于"，
名称："关于",
组件：关于
},
{
路径："/home "，
组件：主页
},
{
路径："/",
重定向："/home "
}
]
})
【About.vue】
模板
差异
关于
br /
姓名：{{$route.query.name}}
br /
年龄：{{$route.query.age}}
/div
/模板
脚本
/脚本
风格
/风格
【App.vue】
模板
差异
差异
！-需要使用：至-
路由器链接：to= people 关于/路由器链接
br/
br/
路由器链接到=/home home/路由器链接
/div
br/
差异
点火电极
路由器视图/路由器视图
/保持活力
/div
/div
！应用程序
/模板
脚本
导出默认值{
data() {
返回{
人物：{姓名： 关于，查询：{姓名：“杰瑞”，年龄： 32}}
}
}
}
/脚本
风格
/风格
截图：
初始画面：
点击关于，可以传递参数
3、通过param传递
与询问类似，用名字定位路由，但是通过参数传递参数，并使用$route.params接收参数。
【修改上面的文件】
【App.vue】
模板
差异
差异
！-需要使用：至-
路由器链接：to= people 关于/路由器链接
br/
br/
路由器链接到=/home home/路由器链接
/div
br/
差异
点火电极
路由器视图/路由器视图
/保持活力
/div
/div
！应用程序
/模板
脚本
导出默认值{
data() {
返回{
人物：{姓名： 关于，参数：{姓名：“杰瑞”，年龄： 32}}
}
}
}
/脚本
风格
/风格
【About.vue】
模板
差异
关于
br /
名称：{{$route.params.name}}
br /
年龄：{{$route.params.age}}
/div
/模板
脚本
/脚本
风格
/风格
截图：
初始画面：
点击关于，参数传递正常。
六、$route 与 $router 的区别
1、$route
$路线指的是路由信息的对象，其包含的是路由的相关信息。比如：路径，名称，完整路径，查询，参数，元。
(1)$route.path与$route.fullPath对应当前路由的路径。
(2)$route.query与$route.params都属于键值对象，表示全球资源定位器(统一资源定位器)传递的参数。
(3)$route.name指的是当前路由的名字。
2、$router
$路由器指的是路由实例的对象，即新武鲁特创建的实例。其包含了常用的方法（比如推送(),替换(),返回()等方法)。
(1)$router.push()使用推方法可以向浏览器的历史栈中添加一个新的记录，当点击浏览器的返回按钮或触发背部方法时，可以返回之前的页面。
(2)$router.replace()使用替换方法不会向历史中添加记录，而是替换当前的记录，此时点击后退按钮不会返回之前的页面。
3、跳转路由的三种形式
(1)通过标签实现。
路由器-链接路由器-视图实现。
(2)通过射流研究…代码实现。(可以传递参数，增加一个询问属性即可)
这个1000美元路由器。替换({路径：/登录 })
这个router.replace({ path:/Login ，query: {name: tom})
(3)通过射流研究…代码实现。
这个router.push({ path:/Login})
到此这篇关于某视频剪辑软件路由某视频剪辑软件路由器用法讲解的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。