文章目录
前言
-
声明式路由导航
直接写在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
-
点击登录
