vue-router路由的两种模式,简述vue-router路由的作用
Vue-Router是中小型项目的必备组件。Vue-Router提供了一种便捷的方式进行路由跳转，在使用过程中存在一些漏洞。希望能给码农在编码找不到问题的时候提供一些启发。
:
目录
1.安装Vue路由器3。固定路由跳转4。动态路由跳跃5。vue-路由器配置文件6。用代码控制路由跳跃。
1.安装Vue-router
门户：正式文件
纱线添加vue-路由器@4 - save
2.安装完成后，您还需要在main.js中导入vue-router
从“vue”导入{ createApp }
从导入应用程序。/App.vue
从导入路由器。/路由器
从“naive-ui”导入naive
createApp(应用程序)。使用(路由器)。用(幼稚)。挂载(#app)
3.固定路由跳转
使用场景跳转到Index页面或者Login页面
在这种场景下，路由通常是固定的，不需要data(){}或者setup函数。
它返回动态数据。
！-在Vue3.x中，根元素可能不是一个，模板下可能有多个根节点。
，这样div id=app 就不用按照官方的例子来写了——
div id=应用程序
p
！-使用路由器链接组件进行导航-
！-通过传递“to”来指定链接-
路由器链接到=/转到主页/路由器链接
router-link to=/about 转到About/router-link
/p
！-当您单击超链接“转到主页”时，会出现以下路由器视图
元素将在路径“/”中呈现相应的组件，如果你想改变所有当前页面的呈现。
那么您的路由器视图应该在当前组件的父组件上声明。-
路由器视图/路由器视图
/div
4.动态路由跳转
在项目多这种场景用到的比较多
定义您想要跳转到的路线。我定义为menus。至少你应该有属性key和to，key。当超链接被渲染时，超链接的文字内容，to是用来定义你要跳转到哪个路由的。
脚本
从“vue”导入{ define component }；
导出默认定义组件({
setup() {
常量菜单=[
{key:主页，to:索引 }，
{key:商品列表，to:商品列表 }，
{key:提交历史，to:历史 }，
];
返回{
菜单，
};
},
});
/脚本
在模板中，需要对数据进行如下解析，以便它可以在视图中正确呈现。
div id=应用程序
！-我在这里用的导航系统。如果您使用的elementUI相似，
您可以忽略标签n-button，因为它是由UI框架提供的。-
n按钮
color=#b5b7ba
文本
v-for=(item，index) in menus
:key=index
class=redTextWithoutUnderline
router-link:to= item . to { item . key } }/router-link
/n-按钮
/div
默认情况下，字体为蓝色，并在跳转连接的文本下加下划线。你可以用一种风格来掩盖它。
风格。redTextWithoutUnderline {
文字-装饰：无；//用于取消超链接下划线
颜色：红色；//用于设置超链接的字体颜色
}
/风格
2022年03月21日新增路由控制章节
5. vue-router配置文件
# coms这里是为src/components设置的路径别名，这个js文件的路径是
#项目根路由器/index.js
从“vue-router”导入{ createWebHistory，create router }；
从“coms/Login.vue”导入登录；
从“coms/Home.vue”导入主页；
#定义特定路线
恒定路线=[{
路径：“/login”，
名称：登录，
组件：登录，
}, {
路径：“/”，
姓名：家，
成分：家，
}];
#历史模式和哈希模式的区别请参考文末的官方文档。
const router=createRouter({
history: createWebHistory()，
路线：路线，
});
#路由卫士，实现未登录的用户。他跳转到登录页面。
router.beforeEach((收件人，发件人，下一个)={
var uid=window . session storage . getitem( uuid )；
if (to.name！==登录！uid) {
下一步({ name:登录 })
}否则{
下一个()
}
})
#公开路由组件
导出默认路由器；
6.在代码中控制路由跳转
例如在登录成功后跳转到首页，这个逻辑应该如何实现呢？
脚本
//无需解释，介绍vue-router组件
从“vue-router”导入{ user outer }；
setup() {
//获取路由器的引用
const router=user outer()；
函数验证用户名(){
验证UserNameAPI(loginForm)。然后((res)={
if (res.code===0) {
Console.log(“登录成功”)
}否则{
Console.log(登录失败)
});
//替换将清除路由器堆栈的历史记录。
//也就是不能点击返回按钮，也就是跳转到home组件。
//在这里，名为home的组件不能在当前脚本中导入
router . replace({ name: home })；
}
})。catch((err)=console . log(err))；
}
返回{验证用户名，}
}
/脚本
参考：Vue-路由器路由模式
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。