【Vue】编程式导航-两种路由跳转方式
问题点击按钮跳转如何实现？
https://img-blog.csdnimg.cn/img_convert/75d8b2a76fad4e7273b19fdde3441332.png
方案
编程式导航：用JS代码来进行跳转
以前使用js是通过location.href来跳转的，但由于vue中使用的是路由，它有专门的跳转方式
两种语法：
[*]path 路径跳转 （简易方便）
[*]name 定名路由跳转 (适合 path 路径长的场景)
这两种方式都可以被称为编程式导航
一、path路径跳转语法
特点：简易方便
router指的是大的路由对象
//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
path: '路由路径'
})
二、name定名路由跳转
特点：适合 path 路径长的场景
语法：
[*] 路由规则，必须在main.js中配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },
[*] 通过name来进行跳转
//简单写法
this.$router.push('路由名')
//完整写法
this.$router.push({
name: '路由名'
})
三、代码示例
main.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
// 创建了一个路由对象
const router = new VueRouter({
// 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
mode: 'history',
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ name: 'search', path: '/search/:words?', component: Search },
{ path: '*', component: NotFound }
]
})
export default router
Home.vue
<template>
<div class="home">
<div class="logo-box"></div>
<div class="search-box">
<input type="text">
<button @click="goSearch">搜索一下</button>
</div>
<div class="hot-link">
热门搜索：
<router-link to="/search/黑马程序员">黑马程序员</router-link>
<router-link to="/search/前端培训">前端培训</router-link>
<router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'FindMusic',
methods: {
goSearch () {
// 1. 通过路径的方式跳转
// (1) this.$router.push('路由路径') [简写]
his.$router.push('/search')
// (2) this.$router.push({ [完整写法]
// path: '路由路径'
// })
this.$router.push({
path: '/search'
})
// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
// this.$router.push({
// name: '路由名'
// })
this.$router.push({
name: 'search'
})
}
}
}
</script>
<style>
.logo-box {
height: 150px;
background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
display: flex;
justify-content: center;
}
.search-box input {
width: 400px;
height: 30px;
line-height: 30px;
border: 2px solid #c4c7ce;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box input:focus {
border: 2px solid #ad2a26;
}
.search-box button {
width: 100px;
height: 36px;
border: none;
background-color: #ad2a26;
color: #fff;
position: relative;
left: -2px;
border-radius: 0 4px 4px 0;
}
.hot-link {
width: 508px;
height: 60px;
line-height: 60px;
margin: 0 auto;
}
.hot-link a {
margin: 0 5px;
}
</style>
四、path路径跳转传参
问题
点击搜索按钮，跳转须要把文本框中输入的内容传到下一个页面如何实现？
https://img-blog.csdnimg.cn/img_convert/80c07e6ff11c1c6ced94e70088c64965.png
两种传参方式
1.查询参数
2.动态路由传参
传参
两种跳转方式，对于两种传参方式都支持：
① path 路径跳转传参
② name 定名路由跳转传参
path路径跳转传参（query传参）
// 简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
// 完整写法（更适合传参）
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
},
replace: true // 不占用浏览器的历史记录
})
接受参数的方式依然是：$route.query.参数名
path路径跳转传参（动态路由传参）
首先修改路由:word
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path: '/路径/参数值'
})
接受参数的方式依然是：$route.params.参数值
**留意：**path不能共同params使用
五、编程式导航-name定名路由传参
name 定名路由跳转传参 (query传参)
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
通过this.$route.query.参数名
name 定名路由跳转传参 (动态路由传参)
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})
六、总结
路径长，使用name，路径多，使用动态路由传参
1.path路径跳转
[*] query传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
[*] 动态路由传参
this.$router.push('/路径/参数值')
this.$router.push({
path: '/路径/参数值'
})
2.name定名路由跳转
[*] query传参
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
[*] 动态路由传参 (须要配动态路由)
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]