前言

声明式路由导航
直接写在html中，结构简单使用方便，但是只能放在<router-link>标签中使用，<router-link>标签会将路由转成<a>标签，通过点击跳转路由，因此局限性也非常大
编程式路由导航
需要写在js中，结构也不算复杂，优势在于非常灵活，不受固定标签限制，可以在任意情景下转跳路由

实际应用时可根据自身喜好决定使用哪种路由

路由实现

1.目标

实现一个简单的登录页到主页的转跳

2.前置条件

<1>安装vue-router插件

可以参考这篇文章

https://blog.csdn.net/weixin_43721000/article/details/125017785

<2>写个用于转跳的组件页

ps：普通组件放在 src/components 中，路由组件一般放在 src/pages 或者 src/views 下

简单写个主页，用于登录转跳测试
/src/pages/Home.vue

<template><h1>{{$route.query.msg}}</h1>
</template><script>export default {name: "Home",}
</script><style>
</style>

<3>写路由文件

src 下创建 router/index.js 路由文件，内容如下

import VueRouter from 'vue-router'
import Login from '../pages/Login'   // 引入组件
import Home from '../pages/Home'   // 引入组件// 创建路由器
const router = new VueRouter({routes:[{// 访问根路径时，重定向到login组件path: '/', redirect: 'login'},{name:'login',    // 路由名path:'/login',      // 路由路径component:Login   // 对应组件名},{name:'home',      // 路由名path:'/home',   // 路由路径component:Home   // 对应组件名},]
})export default router;

<4>写路由锚点

路由组件渲染位置

<template><div id="app"><!-- 路由组件显示锚点 start -->  <router-view></router-view><!-- 路由组件显示锚点 end -->  </div>
</template><script>
</script><style>
</style>

3.声明式路由导航

<1>实现

src/pages/Login.vue

<template><div><h1>{{$route.query.msg}}</h1><br>用户名：<input id="uname" name="username" value="ps"/>密码 ：<input id="pwd" name="password" value="123"/><!-- 声明式路由导航 start --><router-link :to="{name:'home', query: {msg:'欢迎'}}">登录</router-link>         <!--  query传参 路由不需增加额外配置，举例 path: "/login" --><!-- <router-link :to="{name:'home', params: {msg:'登录'}}">login</router-link> --> <!-- params传参 路由需增加 “:参数名” 配置，举例 path: "/login/:msg" --><!-- 声明式路由导航 end --></div>
</template><script>export default {name: "Login",}
</script><style>
</style>

<2>测试

启动 vue 访问 http://127.0.0.1:端口/
页面自动转跳到 http://127.0.0.1:端口/#/login
点击登录

4.编程式路由导航

<1>实现

src/pages/Login.vue

<template><div><h1>{{$route.query.msg}}</h1><br>用户名：<input id="uname" name="username" value="ps"/>密码 ：<input id="pwd" name="password" value="123"/><!-- 编程式路由导航 start --><button @click="toHomePage('好耶')">登录</button><!-- 编程式路由导航 end --></div>
</template><script>export default {name: "Login",methods: {// 编程式路由导航 start ----------------------------------------toHomePage(msg) {// push 方法，路由历史记录会被全部保留this.$router.push({name:'home', query:{msg:msg}})  // query传参 路由不需增加额外配置，举例 path: "/login"// this.$router.push({name:'home', params:{msg:msg}}) // params传参 路由需增加 “:参数名” 配置，举例 path: "/login/:msg"// replace 方法，本次路由记录覆盖上一次的路由记录// this.$router.replace({name:'home', query:{msg:msg}})  // query传参 路由不需增加额外配置，举例 path: "/login"// this.$router.replace({name:'home', params:{msg:msg}}) // params传参 路由需增加 “:参数名” 配置，举例 path: "/login/:msg"}// 编程式路由导航 end ------------------------------------------}}
</script><style>
</style>

<2>测试

启动 vue 访问 http://127.0.0.1:端口/
页面自动转跳到 http://127.0.0.1:端口/#/login
点击登录

Vue声明式路由导航和编程式路由导航的优缺点及实现方法相关推荐

路由声明式传参和编程式传参
声明式传参(使用带href /或本质上是a标签的时候) 直接带路径里带携带参数下例在地址栏是可以看到参数的(querys传参) 在vue.tools插件里可以观察到取出路径参数的方式 param ...
vue声明式导航和编程式导航
声明式导航: 声明式导航是写在template标签里,通过<router-link></router-link>标签来触发: <router-link to=" ...
Vue -- 编程式路由导航
文章目录 1. 声明式导航 & 编程式导航 1.1 声明式导航 1.2 编程式导航 2. vue-router 中的编程式导航 API 2.1 常用的编程式导航 API 2.2 \$route ...
声明式导航和编程式导航
路由跳转的方式,有两种: 1.声明式导航 router-link 是vue-router提供的一个全局组件 router-link 实际上最终会渲染成一个a标签,to属性等价于 href属 ...
Vue 编程式路由导航
文章目录 router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子 router- link的replace属性 1.作用:控制路由跳转时操作浏览器历史记录的模式 ...
编程式路由导航连续跳转出现NavigationDuplicated报错的问题
1.错误示例如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated 2.分析错误产生原因原因是在vue-router3.1.0之后, 引入了promise ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
编程式路由导航和withRouter
编程式路由导航如果想使用按钮实现路由跳转,有两种形式,可回退和不可回退两种: 由于history被放在props中,可以直接通过this.props.history的push和replace改变可 ...
Day31_编程式路由导航
提出需求 1.观察this.$router 上有什么 (push replace) 2.实现this$router.push查看 1>在message组件里面: 3.实现this$rou ...

Vue声明式路由导航和编程式路由导航的优缺点及实现方法

文章目录

前言

路由实现

1.目标

2.前置条件

<1>安装vue-router插件

<2>写个用于转跳的组件页

<3>写路由文件

<4>写路由锚点

3.声明式路由导航

<1>实现

<2>测试

4.编程式路由导航

<1>实现

<2>测试

Vue声明式路由导航和编程式路由导航的优缺点及实现方法相关推荐

最新文章

热门文章